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

Question

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.

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

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.

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.

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());
        }
    });

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:

Any idea?

Answer 1

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 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') .

Answer 2

Chosen solution works great, but will break on multi-dash attributes (like data-one-two ) because:

Since jQuery 3, every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the HTML dataset API. A statement like $( "body" ).data( { "my-name": "aValue" } ).data(); will return { myName: "aValue" } .

source

To make results of data() work with removeAttr() we should cast them back to normal:

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
}

It's not an ideal solution, but should work in most cases.

Answer 3

this is wrong

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

// you have to pass in the name of the attribute

Do this instead

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

// Removed quote