如何删除元素上的所有数据属性? [英] How to remove all data attributes on element?

问题描述

我一直在检查stackoverflow中的许多帖子，但是，即使许多解决方案都可以使用，但对我来说仍然不起作用.

I've been checking many and many posts here in stackoverflow but, even if many solutions should be working, it yet doesn't work for me.

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

I have a modal in bootstrap where I have a list of bootstrap checkboxes (<label><input> style).

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

Each checkbox has a set of data attributes that are directly setted from an AJAX request and, therefore, that aren't settet through jQuery.

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

In my situation, I need to remove all the data-attr from the checkbox when it is toggled and add some other.

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

The problem, however, is that I'm being unable to remove them.

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

I've first tried using jQuery.removeData(), but then I've read that it actually only removes data attributes if at least one of them has been set through jQuery, therefore it is not my case.

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

So, I've checked a little bit around and found out that I should be using jQuery.removeAttr() prototype and remove each data element.

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

So, my case is this one:

$('.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函数:

And, in order to have a clean code, I've implemented the function removeAllData:

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

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

Which is just looping through the object to check what data attributes it has and it should be removing it.

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

Surprisingly, the result is this one:

有什么主意吗?

推荐答案

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

Try calling the jQuery .removeData function as well as your removeAllData function:

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的 writes )，并且在调用<时不会清除该缓存. c7>.

jQuery maintains a separate object where data-foo values are cached as soon as they're access (and where writes to .data are stored) and that cache is not cleared when you call .removeAttr('data-foo').

这篇关于如何删除元素上的所有数据属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！