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

There is a function to remove attribute in jQuery: http://api.jquery.com/removeattr/ it's more clean that "" — Superdrac, Jun 05 '14 at 11:42
@Pranav I think he wants to remove all `data-` attributes and he don't know all names. — Epsil0neR, Jun 05 '14 at 11:44
Take a look at this subject. http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery 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() — Superdrac, Jun 05 '14 at 11:46
@ Epsil0neR he can get all the data attributes using .data(). — Pranav, Jun 05 '14 at 11:49
@3rror404 the link that you have given is for all data- attributes whose 'name' I m aware of! — Prashant, Jun 05 '14 at 12:13

Anoop Joshi P · Accepted Answer · 2014-06-05T12:10:56.087

13

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

edited Jun 05 '14 at 12:10

answered Jun 05 '14 at 11:52

Anoop Joshi P

25,373
8
32
53

1

+1 I'm not sure who downvoted, but this method works. – Mottie Jun 05 '14 at 11:54
@AnoopJoshi your solution likes mine but i don't know who downvote solutions... – Saman Gholami Jun 05 '14 at 11:57
3

You can shorten this to `$.each( $('div').data(), function(i){ $("div").removeAttr("data-" + i); });` ([demo](http://jsfiddle.net/WVfSg/262/)) – Mottie Jun 05 '14 at 12:06
@Mottie Thats cool. Didnt think about that initially. – Anoop Joshi P Jun 05 '14 at 12:08
1

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) – Prashant Jun 05 '14 at 12:11
This does not work, if there are more than one hyphen: http://jsfiddle.net/jr1d4s58/ The problem is that .data() returns camelCase keys. – Spomsoree Oct 27 '20 at 10:51
This is a working version, but there might by an easier way: http://jsfiddle.net/vgo7fL4y/1/ – Spomsoree Oct 27 '20 at 10:57

Saman Gholami · Answer 2 · 2014-06-05T12:17:44.287

3

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

edited Jun 05 '14 at 12:17

answered Jun 05 '14 at 11:46

Saman Gholami

3,416
7
30
71

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](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea) – Mottie Jun 05 '14 at 12:12

score 2 · Answer 3 · answered Jun 05 '14 at 11:47

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

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 — Prashant, Jun 05 '14 at 11:52
@Prashant - yes. And you can extract the values using the `data()` function. — Lix, Jun 05 '14 at 11:52

Removing all dynamic 'data attributes' of an Element

3 Answers3

Linked

Related