How to remove data-* attributes using the HTML dataset attribute

Question

According to the dataset specification, how is element.dataset meant to delete data attributes? Consider:

<p id="example" data-a="string a" data-b="string b"></p>

If you do this:

var elem = document.querySelector('#example');
elem.dataset.a = null;
elem.dataset.b = undefined;
elem.dataset.c = false;
elem.dataset.d = 3;
elem.dataset.e = [1, 2, 3];
elem.dataset.f = {prop: 'value'};
elem.dataset.g = JSON.stringify({prop: 'value'});

the DOM becomes this in Chrome and Firefox:

<p id="example" 
   data-a="null" 
   data-b="undefined" 
   data-c="false" 
   data-d="3" 
   data-e="1,2,3" 
   data.f="[object Object]" 
   data.g="{"prop":"value"}"
></p>

The Chrome/Firefox implementations mimic setAttribute. It basically applies .toString() first. This makes sense to me except for the treatment of null because I would expect that null would remove the attribute. Otherwise how does the dataset API do the equivalent of:

elem.removeAttribute('data-a');

And what about boolean attributes:

<p data-something> is equivalent to <p data-something=""> Hmm.

maximdim · Accepted Answer · 2012-02-08 20:55:54Z

90

Wouldn't 'delete' remove dataset element? E.g.:

<div id="a1" data-foo="bar">test</div>

<script>
var v = document.getElementById('a1');  
alert(v.dataset.foo);
delete v.dataset.foo;
alert(v.dataset.foo);
</script>

answered Feb 8, 2012 at 20:55

maximdim

8,2073 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jeremy Karlsson Over a year ago

Note; delete v.dataset.foo; will not work in Safari. A cross browser solution would be; v.removeAttribute('data-foo')

Dogoku Over a year ago

@maximdim, can you please update your answer to include the comment from Jeremy? Even in Safari 10, this is still an issue. Safari 11 fixes this (checked with Safari Technical Preview)

ips Over a year ago

Jeremy's answer is not entirely correct. If value is assigned programmatically (v.dataset.foo = 'bar') then removeAttribute does not have the same effect as delete v.dataset.foo — it doesn't delete the property from dataset

Glenn Maynard Over a year ago

@ips It does. v.dataset dynamically reflects the values of the attribuites, it's not a separate object.

wlnirvana Over a year ago

delete v.dataset.foo works on my mac with safari 11.1.2

scazzy · Accepted Answer · 2021-05-04 08:59:11Z

11

A rather simpler and straightforward approach:

const someElement = document.querySelector('...');

Object.keys(someElement.dataset).forEach(dataKey => {
  delete someElement.dataset[dataKey];
});

answered May 4, 2021 at 8:59

scazzy

9782 gold badges9 silver badges21 bronze badges

Comments

user670839 · Accepted Answer · 2020-02-20 07:29:20Z

2

As per MDN you need to use the delete operator to remove a dataset element

When you want to remove an attribute, you can use the delete operator.

const p = document.getElementById('example')
delete p.dataset.a
delete p.dataset.b

answered Feb 20, 2020 at 7:29

user670839

Comments

V P · Accepted Answer · 2019-05-24 02:24:25Z

0

This is to remove all the data-* attributes. You can add a condition in the for loop to remove only particular data-attribute. Hope this helps :)

var elem = document.querySelector('#example');
var dataset = elem.dataset;
for (var key in dataset) {
    elem.removeAttribute("data-" + key.split(/(?=[A-Z])/).join("-").toLowerCase());
}

answered May 24, 2019 at 2:24

V P

768 bronze badges

Comments

Shakeel · Accepted Answer · 2014-05-19 04:05:54Z

-7

<div data-id="test">test</div>

$(document).ready(function(){
  $("div").removeAttr("data-id"); // removing the data attributes.
  console.log($("div").data("id")); // displays in the console.
});

answered May 19, 2014 at 4:05

Shakeel

212 bronze badges

Collectives™ on Stack Overflow

How to remove data-* attributes using the HTML dataset attribute

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related