Soy desarrollador web principiante. Tengo un pequeño problema con la eliminación de clases de todos los elementos de mi página web.
tengo este codigo:
showErrorMessage(message, className) { let elems = document.querySelectorAll("text-danger invalid"); [].forEach.call(elems, function(el) { el.classList.remove("text-danger invalid"); }); document.querySelector(className).className += " text-danger invalid"; Swal.fire( 'Błąd', message, 'error', ); },Este código funciona bien, pero no elimina la clase anterior de div. Necesito:
tengo un problema con el 1.
¿Cómo puedo repararlo?
Por favor, ayúdame :)
Tienes 2 problemas con tu código:
document.querySelectorAll(".text-danger.invalid");element.classList.remove() acepta clases como cadenas separadas ( ver MDN Docs ). Reemplace la línea 4 con: el.classList.remove("text-danger", "invalid");EDITAR: incorporó las sugerencias de los comentarios a continuación
Tienes varios problemas con tu código:
querySelectorAll() usa selectores CSS. Entonces, si necesita elegir todos los elementos con dos clases, debe usar ".class-one.class-two" .classList.remove() no permite espacios, así que separe las clases con una coma.forEach() .Así que aquí está el código que debería funcionar:
const elems = document.querySelectorAll(".text-danger.invalid") elems.forEach((item) => { item.classList.remove("text-danger", "invalid") })Véase también el fragmento de código
function remove() { let elems = document.querySelectorAll(".text-danger.invalid") elems.forEach((item) => { item.classList.remove("text-danger", "invalid") }) } .text-danger.invalid { color: red; } <div class="text-danger invalid">Text</div> <div class="text-danger invalid">Text</div> <button onclick="remove()">Remove classes</button>querySelectorAll es similar array-like , no es una array
Use Array.from para convertirlo en una array
const elems = document.querySelectorAll("text-danger invalid"); Array.from(elems).forEach(e => { e.classList.remove("text-danger", "invalid"); }); Aviso: Clases separadas en classList.remove