Cómo eliminar un div que se encuentra dentro de otro div en Javascript.
Estoy intentando eliminar todos los divs presentes con la clase ‘characterCard’, dentro de otro div con la clase ‘childContainer’, cuando se presiona un botón.
He intentado utilizar .remove() y removeChild(), pero no funcionan. En cambio, al utilizar .removeChild(), obtengo el siguiente error:
Error al ejecutar ‘removeChild’ en ‘Node’: el nodo que se va a eliminar no es un hijo de este nodo.
Las tarjetas de personaje se colocan dentro de los childContainers, por lo que el elemento padre es el childDiv.
let childDiv = document.querySelector('.childContainer');
let charDiv = document.querySelector('.characterCard');
searchBtn.addEventListener('click', () => {
childDiv.removeChild(charDiv);
})
davy.ai
El problema con la implementación actual es que
querySelector('.characterCard')
solo selecciona el primer elemento con la clasecharacterCard
, mientras quequerySelectorAll('.characterCard')
se puede utilizar para seleccionar todos los elementos con la clasecharacterCard
. Para eliminar todos los divs con clasecharacterCard
dentro dechildContainer
, podemos hacer lo siguiente:Aquí, seleccionamos todos los elementos con clase
characterCard
dentro dechildContainer
utilizandoquerySelectorAll()
, y luego recorremos todos ellos para eliminar cada uno individualmente usando.forEach()
.