How to remove data-* attributes using HTML5 dataset

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:

  • store and retrieve javascript arrays into and from HTML5 data attributes
  • using $.data(“value”) versus $.attr(“data-value”)
  • Using jQuery to get data attribute values with .each()
  • Why does jquery remove brackets from data html5 attribute?
  • 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.

  • Using jQuery to get data attribute values with .each()
  • store and retrieve javascript arrays into and from HTML5 data attributes
  • using $.data(“value”) versus $.attr(“data-value”)
  • Why does jquery remove brackets from data html5 attribute?
  • 2 Solutions collect form web for “How to remove data-* attributes using HTML5 dataset”

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