Comment faire pour supprimer des données* les attributs à l'aide de HTML5 dataset

Selon le jeu de données spec, comment est de l'élément.dataset visant à supprimer les données d'attributs? Considérer:

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

Si vous faites cela:

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

les DOM devient présent 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>

Le Chrome/Firefox mise en œuvre imite setAttribute. Il s'applique essentiellement .toString() premier. Cela fait sens pour moi, sauf pour le traitement de null parce que je m'attends à ce que null serait de supprimer l'attribut. Sinon, comment fonctionne le jeu de données de l'API ne soit l'équivalent de:

elem.removeAttribute('data-a');

Et ce sur les attributs booléens:

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

InformationsquelleAutor ryanve | 2012-02-08
  1. 44

    Ne serait pas "supprimer" supprimer dataset élément? 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>
    • delete elem.dataset.foo fonctionne!
    • Note; delete v.dataset.foo; ne fonctionnera pas dans Safari. Un navigateur croix solution serait; v.removeAttribute('data-foo')
    • pouvez vous s'il vous plaît mettre à jour votre réponse à inclure le commentaire de Jeremy? Même dans le Safari de 10, c'est toujours un problème. Safari 11 résout ce (vérifié avec Safari Technical Preview)
    • Jeremy la réponse n'est pas tout à fait correct. Si la valeur est affectée par programme (v.dataset.foo = 'bar') puis removeAttribute n'a pas le même effet que delete v.dataset.foo — il ne supprime pas la propriété de dataset
    • Il n'. v. dataset dynamiquement reflète les valeurs de la attribuites, ce n'est pas un objet distinct.
    InformationsquelleAutor maximdim
  2. 0

    C'est de supprimer toutes les données* les attributs. Vous pouvez ajouter une condition dans la boucle pour ne supprimer que les données particulières-attribut. Espérons que cela aide 🙂

    var elem = document.querySelector('#example');
var dataset = elem.dataset;
for (var key in dataset) {
    elem.removeAttribute("data-" + key.split(/(?=[A-Z])/).join("-").toLowerCase());
}
    InformationsquelleAutor V P
  3. -6
    <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.
});
    InformationsquelleAutor Shakeel