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

Question

我已经在 stackoverflow 中检查了很多很多帖子，但是，即使许多解决方案应该有效，它仍然对我不起作用。

我在引导程序中有一个模态，其中有一个引导程序复选框列表（<label><input>样式）。

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

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

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

我第一次尝试使用jQuery.removeData()，但后来我读到它实际上只删除数据属性，如果其中至少一个已经通过 jQuery 设置，因此这不是我的情况。

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

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

$('.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值一旦被访问就会被缓存（以及存储写入.data的位置），并且当您调用.removeAttr('data-foo').