How to remove data-* attributes using HTML5 dataset

Question

According to the dataset spec, 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 implementation mimics 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.

Solution 1

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>

Solution 2

A rather simpler and straightforward approach:

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

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

Solution 3

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

Comments

[Jeremy Karlsson]

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

[Dogoku]

@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]

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]

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

[wlnirvana]

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