Cómo eliminar atributos data-* usando dataset HTML5

Question

Cómo eliminar atributos data-* usando dataset HTML5

De acuerdo con la especificación del conjunto de datos, cómo es el elemento .dataset destinado a eliminar atributos de datos? Considere:

<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 setAttribute. Básicamente se aplica .toString() primero. Esto tiene sentido para mí, excepto por el tratamiento de null porque esperaría que null eliminaría el atributo. De lo contrario, ¿cómo funciona el conjunto de datos API hacer el equivalente de:

elem.removeAttribute('data-a');

Y qué pasa con los atributos booleanos:

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

28

javascript web-standards html5-data

Author: user, 2012-02-09

Source

2 answers

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

-5

Author: Shakeel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-19 04:05:54

score 38 · Accepted Answer

¿'delete' no eliminaría el elemento dataset? Por ejemplo:

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

38

Author: maximdim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-08 20:55:54