javascript - sirve - para qué se usan los data attributes `?

Cómo eliminar los atributos de datos usando un conjunto de datos HTML5

Question

De acuerdo con la especificación del conjunto de datos , ¿cómo se pretende que element.dataset elimine atributos de datos? Considerar:

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

Si haces 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 en 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>

La implementación de Chrome / Firefox imita a setAttribute . Básicamente aplica .toString() . 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 hace la API del conjunto de datos el equivalente de:

elem.removeAttribute(''data-a'');

¿Y qué pasa con los atributos booleanos?

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

Answer 1

¿No ''eliminar'' eliminaría el elemento del conjunto de datos? P.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.
});