javascript - 如何删除元素上的所有数据属性？

Question

我一直在检查 stackoverflow 中的许多帖子，但是，即使许多解决方案应该有效，但它对我来说仍然不起作用。

我在 bootstrap 中有一个模式，其中有一个 bootstrap 复选框列表(<label><input> 样式)。

每个复选框都有一组数据属性，这些属性直接从 AJAX 请求设置，因此不通过 jQuery 设置。

在我的情况下，当它被切换时，我需要从复选框中删除所有数据属性并添加一些其他的。

但是，问题是我无法删除它们。

我首先尝试使用 jQuery.removeData() ，但后来我读到它实际上只有在通过 jQuery 设置了至少一个数据属性的情况下才删除数据属性，因此这不是我的情况。

所以，我仔细检查了一下，发现我应该使用 jQuery.removeAttr()原型(prototype)并删除每个数据元素。

所以，我的情况是这样的:

$('.modal_day_checkbox').on('change', function(){
        if ($(this).is(':checked')) {
            removeAllData($(this));
            $(this).data('newid', 'test_id');
            console.log($(this).data());
        }
        else {
            removeAllData($(this));
            $(this).data('testID', 'ID_NEW');
            console.log($(this).data());
        }
    });

并且，为了拥有干净的代码，我实现了函数 removeAllData:

function removeAllData(object) {
        $.each(object.data(), function(i, v) {
            object.removeAttr("data-"+i);
            console.log('removing: '+'data-'+i);
        });
    }

它只是循环遍历对象以检查它具有哪些数据属性，并且应该将其删除。

令人惊讶的是，结果是这样的:

有什么想法吗？

Answer 1

尝试调用 jQuery .removeData 函数以及您的 removeAllData 函数:

function removeAllData(object) {
    $.each(object.data(), function(i, v) {
        object.removeAttr("data-"+i);
        console.log('removing: '+'data-'+i);
    });
    object.removeData();  // clear the cache too
}

jQuery 维护一个单独的对象，其中 data-foo 值在访问时立即被缓存(以及 writes 到 .data已存储)并且当您调用 .removeAttr('data-foo') 时不会清除该缓存。