How to remove all data attributes on element?

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.