web-dev-qa-db-fra.com

Comment supprimer des attributs data- * à l'aide d'un ensemble de données HTML5

Selon la spécification de l'ensemble de données , comment element.dataset est-il censé supprimer les attributs de données? Considérer:

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

Si tu fais ça:

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

le DOM devient ceci dans Chrome et 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>

L'implémentation de Chrome/Firefox imite setAttribute . Il applique essentiellement .toString() en premier. Cela a du sens pour moi, sauf pour le traitement de null car je m'attendrais à ce que null supprime l'attribut. Sinon, comment l'API d'ensemble de données fait-elle l'équivalent de:

elem.removeAttribute('data-a');

Et qu'en est-il des attributs booléens:

<p data-something> Est équivalent à <p data-something=""> Hmm.

javascriptweb-standardshtml5-data
34
ryanve

"Supprimer" ne supprimerait-il pas l'élément de l'ensemble de données? Par exemple.:

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

Il s'agit de supprimer tous les attributs data- *. Vous pouvez ajouter une condition dans la boucle for pour supprimer uniquement un attribut de données particulier. J'espère que cela t'aides :)

var elem = document.querySelector('#example');
var dataset = elem.dataset;
for (var key in dataset) {
    elem.removeAttribute("data-" + key.split(/(?=[A-Z])/).join("-").toLowerCase());
}
1
V P

Selon MDN vous devez utiliser l'opérateur de suppression pour supprimer un élément de l'ensemble de données

Lorsque vous souhaitez supprimer un attribut, vous pouvez utiliser l'opérateur de suppression.

const p = document.getElementById('example')
delete p.dataset.a
delete p.dataset.b
0
Catalin