¿Cómo eliminar todos los atributos de datos en el elemento? - javascript, jquery, html

He estado revisando muchas y muchas publicaciones aquí en stackoverflow pero, aunque muchas soluciones deberían estar funcionando, todavía no funciona para mí.

Tengo un modal en bootstrap donde tengo una lista de casillas de arranque (<label><input> estilo).

Cada casilla de verificación tiene un conjunto de atributos de datos que se configuran directamente desde una solicitud AJAX y, por lo tanto, que no se establecen a través de jQuery.

En mi situación, necesito eliminar todo el atributo de datos de la casilla de verificación cuando está activado y agregar otro.

Sin embargo, el problema es que no puedo eliminarlos.

Primero he intentado usar jQuery.removeData(), pero luego he leído que en realidad solo elimina los atributos de datos si al menos uno de ellos se ha establecido a través de jQueryPor lo tanto, no es mi caso.

Entonces, he revisado un poco y descubrí que debería estar usando jQuery.removeAttr() prototipo y eliminar cada elemento de datos.

Entonces, mi caso es este:

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

Y, para tener un código limpio, he implementado la función removeAllData:

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

Lo cual es simplemente recorrer el objeto para verificar qué atributos de datos tiene y debería eliminarlo.

Sorprendentemente, el resultado es este:

¿Alguna idea?

Respuestas

3 para la respuesta № 1

Intenta llamar a jQuery .removeData funcionar tan bien como su removeAllData función:

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 mantiene un objeto separado donde data-foo los valores se almacenan en caché tan pronto como vuelvan a acceder (y donde escribe a .data se almacenan) y ese caché no se borra cuando llama .removeAttr("data-foo").

---

-1 para la respuesta № 2

esto está mal

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

// tienes que pasar el nombre del atributo

Haz esto en lugar

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

// Presupuesto eliminado

---