Cómo eliminar los atributos data- * utilizando el conjunto de datos HTML5

Question

Según the dataset spec, ¿cómo se supone que element.dataset elimina los atributos de datos? Considere:

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

Si hace esto:

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

el DOM se convierte esto en Chrome y 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> 

Los imitadores de aplicación Chrome/Firefox setAttribute. Básicamente se aplica .toString() primero. Esto tiene sentido para mí, excepto para el tratamiento de null porque esperaría que null eliminaría el atributo. De lo contrario, ¿cómo el conjunto de datos API hacer el equivalente de:

elem.removeAttribute('data-a'); 

Y qué decir de los atributos booleanos:

<p data-something> es equivalente a <p data-something=""> Hmm.

Answer 1

¿No 'eliminará' el elemento del conjunto de datos? Ej .:

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

Answer 2

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