1

Estoy intentando eliminar todos los elementos de la clase cupcakede mi dom para volver a pintarlos en base a un filtro.

Estoy haciendo;

let cupcakes= document.getElementsByClassName("cupcake");
alert(cupcakes.length);
for(element of cupcakes){
console.log(element);
container.removeChild(element);
console.log(element);
console.log("-------------------------------------------------------");
}

La longitud de elementos que recupero es exactamente la que necesito y los elementos tambien, pero no entiendo el que solo me elimine los impares, la salida del código anterior es la siguiente;

introducir la descripción de la imagen aquí

Únicamente muestra los elementos impares ¿Por qué? Necesito eliminarlos todos, cada uno de los que recorre el bucle, si suprimo la linea de removeChild imprime todos los objetos.

2 respuestas 2

4

El problema es que la función getElementsByClassName devuelve una lista "viva" de los elementos del HTML, a lo que me refiero es que si eliminas un elemento del HTML también lo eliminas de la lista y esto interfiere con la iteración porque los índices cambian. Una manera de solucionarlo es creando una copia de la lista antes de iterar.

var container = document.getElementById('container');

document.getElementById('boton').addEventListener('click', (e) => {
  let cupcakes = Array.prototype.slice.call(document.getElementsByClassName("cupcake"), 0);
  
  for(element of cupcakes){
    console.log(element);
    element.remove();
  }  
});
<div id="container">
  <div id="1" class="cupcake">1</div>
  <div id="2" class="cupcake">2</div>
  <div id="3" class="cupcake">3</div>
  <div id="4" class="cupcake">4</div>
  <div id="5" class="cupcake">5</div>
  <div id="6" class="cupcake">6</div>
  <div id="7" class="cupcake">7</div>
  <div id="8" class="cupcake">8</div>
  <div id="9" class="cupcake">9</div>
  <div id="10" class="cupcake">10</div>
</div>

<button id="boton">Probar</button>

2
  • Gracias! No desconocia ese comportamiento "vivo", funcionó a la perfección. Commented el 5 dic. 2018 a las 19:23
  • muy útil tu respuesta estaba realizando lo mismo y me di cuenta de lo que comentas, acerca de la lista viva, aun así no daba con la forma de implementarlo, solo una pequeña consulta en caso que querer borrar mas divs con otra clase de que forma se podria implementar? intente con let cupcakes = Array.prototype.slice.call(document.getElementsByClassName("cupcake otraClase"), 0); y con Array.prototype.slice.call(document.getElementsByClassName("cupcake", "otraClase"), 0); y no me funciono obte por repetir dos veces el mismo codigo con diferente clase pero creo que no es lo adecuado. Commented el 30 sept. 2021 a las 13:10
4

Si quieres eliminar todos los elementos div con una clase en específico te recomiendo utilizar JQuery, te dejo un ejemplo donde existe un div con una clase distinta a cupcake:

$( "div" ).remove( ".cupcake" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="cupcake">Prueba 1</div>
<div id="2" class="cupcake">Prueba 2</div>
<div id="3" class="cupcake">Prueba 3</div>
<div id="4" class="cupcake">Prueba 4</div>
<div id="5" class="cupcakePrueba">Prueba 5</div>
<div id="6" class="cupcake">Prueba 6</div>

Utilizo la función remove para eliminarlos del dom. Te dejo la documentación por si la necesitas: https://api.jquery.com/remove/. Saludos.

2
  • No se me permite el uso de JQuerypero gracias, nunca está de más :) Commented el 5 dic. 2018 a las 19:23
  • De acuerdo compañero, creo que hizo falta especificar eso en la pregunta, lo utilicé en la respuesta debido a que te puede facilitar los apuntadores al dom de manera muy rápida y sencilla, suerte y saludos. Commented el 5 dic. 2018 a las 19:25

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.