Removing all dynamic 'data attributes' of an Element

Question

I have a div where dynamic data- attributes get added on some tags. (name of data- attributes to be generated dynamically by script, so there is no way my script will know the NAME of data-attribute)

<div data-1223="some data" data-209329="some data" data-dog="some value"> </div>

Now, I want to write a code in which it resets the div by removing all the data attributes and their values.

I can use

$('div').attr('data-209329',"")

but the problem is I don't know the name of data-attribute that will be added. the data-attribute that will be added is dynamic and I don't have control of it.

removing div and reinserting div is not an option. Pls help. thanks in advance

Solution 1

YOu can use like this

var data = $("div").data();

var keys = $.map(data, function (value, key) {
    return key;
});
for (i = 0; i < keys.length; i++) {
    $("div").removeAttr("data-" + keys[i]);
}

Fiddle

Edit

Suggested by @Mottie

$.each($('div').data(), function (i) {
    $("div").removeAttr("data-" + i);
});

Demo

Solution 2

You can use this code :

var data = $('div').data();

for(var i in data){
    //for change 
    $('div').attr("data-"+i,"something");
    //for remove
    $("div").removeAttr("data-" + i);
}

The $('div').data(); prepare a list of all data attributes in var data variable. Then you can work with it. This is fiddle of this solution.

UPDATE Suggested by @Mottie

 $.each($('div').data(), function (i) {
        //for change 
        $('div').attr("data-"+i,"something");
        //for remove
        $("div").removeAttr("data-" + i);
    });

Solution 3

I think that the removeData() function is what you are looking for here. This will remove all data information stored on the element.

The .removeData() method allows us to remove values that were previously set using .data(). When called with the name of a key, .removeData() deletes that particular value; when called with no arguments, all values are removed. Removing data from jQuery's internal .data() cache does not affect any HTML5 data- attributes in a document; use .removeAttr() to remove those.

It will not however remove the actual attributes from the elements. In order to remove the actual attributes, you'll need to extract a list of the existing attributes. You could do this by inspecting the data() function of an element (before running removeData).

The data() function will return an object of key => value pairs that you can then use to remove the actual attributes from the element using removeAttr().

Comments

[Superdrac]

There is a function to remove attribute in jQuery: api.jquery.com/removeattr it's more clean that ""

[Pranav]

Have you tried using .removeAttr()

[Epsil0neR]

@Pranav I think he wants to remove all data- attributes and he don't know all names.

[Superdrac]

Take a look at this subject. stackoverflow.com/questions/2048720/… There is some functions that allow you to find all the attributes of an html tag. You just have to look at it, find the data-* attribute and remove them by removeAttr()

[Pranav]

@ Epsil0neR he can get all the data attributes using .data().

[Prashant]

@3rror404 the link that you have given is for all data- attributes whose 'name' I m aware of!

[Prashant]

The data- attribute is dynamic....so i will not be able to remove it until and unless i have a name of the attribute. SO, removeData() will not work as it accepts NAME of data- attribute to be removed

[Lix]

@Prashant - yes. And you can extract the values using the data() function.

[Mottie]

+1 I'm not sure who downvoted, but this method works.

[Anoop Joshi P]

Downvoter please care to comment..

[Saman Gholami]

Downvoter please care to comment...

[Saman Gholami]

@AnoopJoshi your solution likes mine but i don't know who downvote solutions...

[Mottie]

You can shorten this to $.each( $('div').data(), function(i){ $("div").removeAttr("data-" + i); }); (demo)

[Anoop Joshi P]

@Mottie Thats cool. Didnt think about that initially.

[Prashant]

This works. Thanks!!! only one issue... its combinining attributes eg if the attribute is data-hello-one its combining the value to helloOne (tried putting a alert for keys[i] in for in loop)

[Mottie]

Your code works, but it's not being up-voted as much because you are using a for...in loop which isn't always ideal

[Spomsoree]

This does not work, if there are more than one hyphen: jsfiddle.net/jr1d4s58 The problem is that .data() returns camelCase keys.

[Spomsoree]

This is a working version, but there might by an easier way: jsfiddle.net/vgo7fL4y/1