Question

我在stackoverflow中一直在检查很多很多帖子，但是，即使许多解决方案应该正常工作，但它对我来说还不起作用。

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

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

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

然而，问题在于我无法移除它们。

我第一次尝试使用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')时。

Answer 2

选择的解决方案效果很好，但是由于以下原因会破坏多点划线属性（例如data-one-two）

从jQuery 3开始，每两个字符序列的“-”（U + 002D）紧随其后由键中的小写ASCII字母替换为大写字母的版本，与HTML数据集API一致。一种像$( "body" ).data( { "my-name": "aValue" } ).data();这样的语句将返回{ myName: "aValue" }。

source

要使data()的结果与removeAttr()一起使用，我们应将其恢复为正常状态：

function removeAllData(object) {
    $.each(object.data(), function(i, v) {
        i = i.replace(/([A-Z])/g, function(all, letter) {
            return '-' + letter.toLowerCase()
        });  // fix multi-dash attributes
        object.removeAttr("data-"+i);
        console.log('removing: '+'data-'+i);
    });
    object.removeData();  // clear the cache too
}

这不是理想的解决方案，但在大多数情况下应该可以使用。

Answer 3

这是错误的

object.removeAttr("data-"+i);

//你必须传递属性的名称

改为

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

//删除了引用

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

3 个答案: