1

tengo esta duda, haciendo pruebas veo que estoy manejando mal el classList digo yo, pero igual no se porque no funciona este fragmento de codigo de la forma esperada por mi

const color=document.querySelector(".rojo");

 for(dato of color.classList){

    color.classList.remove(dato);
}

debiaria eliminarme todas las clases, pero me daja solo la de amarillo no se cual es el error :(

<h1 class="rojo amarillo verde" > color</h1>

1 respuesta 1

1

El problema que estás teniendo es que el método remove() además de borrar el elemento, también realiza una re-indexación. Entonces, el bucle for se estaría comportando de la siguiente manera:

  • Accede al elemento con el índice 0, que es "rojo".
  • Borra el elemento con el índice 0, rojo queda borrado.
  • Reindexa los elementos, por lo que "amarillo" pasa a tener índice 0 y "verde" índice 1.
  • Acabado el bucle, accede al índice 1, que es "verde" (aquí ya vemos que entonces se ha saltado el amarillo, dando como resultado que sea la única clase que se quede).

Aquí dejo un ejemplo para que se vea esto mismo que he explicado, modificando un poco el bucle para poder mostrar el índice del elemento que se está iterando:

const color = document.querySelector(".rojo")

for(const [index, dato] of color.classList.entries()) {
  color.classList.remove(dato)
  console.log(`Se accede al índice ${index} para borrar el elemento "${dato}"`)
}
<h1 class="rojo amarillo verde">Color</h1>

Una manera alternativa de eliminar todas las clases de un elemento del DOM sería a través del atributo className.

const color = document.querySelector(".rojo")

color.className = ''
<h1 class="rojo amarillo verde">Color</h1>

3
  • 3
    remove acepta varios parámetros, podría también hacer color.classList.remove(...color.classList) para borrar todos Commented el 14 mar. 2022 a las 10:54
  • 1
    Qué tal hacer el bucle al revés? Es decir, desde el último elemento hacia el primero. Así, si elimina un elemento, no se ve afectado por la re-indexación.
    – Arriel
    Commented el 14 mar. 2022 a las 14:14
  • 1
    En ese caso deberías usar un for (int i = último; i >= 0; i--)
    – Mateo
    Commented el 14 mar. 2022 a las 14:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.