Comment supprimer tous les attributs de données sur l'élément? - javascript, jquery, html

J’ai vérifié beaucoup et beaucoup de messages ici dans stackoverflow mais, même si de nombreuses solutions devraient fonctionner, cela ne fonctionne pas encore pour moi.

J'ai un modal dans bootstrap où j'ai une liste de cases à cocher bootstrap (<label><input> style).

Chaque case à cocher contient un ensemble d’attributs de données qui sont directement configurés à partir d'une demande AJAX et, par conséquent, cela ne se fait pas par jQuery.

Dans ma situation, je dois supprimer toutes les données-attr de la case à cocher lorsque cette option est activée et en ajouter d'autres.

Le problème, cependant, est que je ne peux pas les enlever.

J'ai d'abord essayé d'utiliser jQuery.removeData(), mais j’ai lu que c’était en fait supprime uniquement les attributs de données si au moins l'un d'entre eux a été défini via jQuerydonc ce n’est pas mon cas.

Donc, j'ai vérifié un peu et j'ai découvert que je devrais utiliser jQuery.removeAttr() prototyper et supprimer chaque élément de données.

Donc, mon cas est celui-ci:

$(".modal_day_checkbox").on("change", function(){
if ($(this).is(":checked")) {
removeAllData($(this));
$(this).data("newid", "test_id");
console.log($(this).data());
}
else {
removeAllData($(this));
$(this).data("testID", "ID_NEW");
console.log($(this).data());
}
});

Et, pour avoir un code propre, j'ai implémenté la fonction removeAllData:

function removeAllData(object) {
$.each(object.data(), function(i, v) {
object.removeAttr("data-"+i);
console.log("removing: "+"data-"+i);
});
}

Qui fait simplement une boucle à travers l'objet pour vérifier quels attributs de données il a et il devrait le supprimer.

Étonnamment, le résultat est celui-ci:

Une idée?

Réponses:

3 pour la réponse № 1

Essayez d'appeler le jQuery .removeData fonctionner ainsi que votre removeAllData fonction:

function removeAllData(object) {
$.each(object.data(), function(i, v) {
object.removeAttr("data-"+i);
console.log("removing: "+"data-"+i);
});
object.removeData();  // clear the cache too
}

jQuery gère un objet séparé où data-foo les valeurs sont mises en cache dès leur accès (et où écrit à .data sont stockés) et ce cache n'est pas effacé lorsque vous appelez .removeAttr("data-foo").

---

-1 pour la réponse № 2

c'est faux

object.removeAttr("data-"+i);

// vous devez passer le nom de l'attribut

Faites ceci à la place

 $.each(object.data(), function(i, v) {
object.removeAttr(v);
console.log("removing: "+v);
});

// Devis supprimé

---