es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo eliminar un div que se encuentra dentro de otro div en Javascript.

05 Aug, 2023 Programación

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);
})
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con la implementación actual es que querySelector('.characterCard') solo selecciona el primer elemento con la clase characterCard, mientras que querySelectorAll('.characterCard') se puede utilizar para seleccionar todos los elementos con la clase characterCard. Para eliminar todos los divs con clase characterCard dentro de childContainer, podemos hacer lo siguiente:

    let childDiv = document.querySelector('.childContainer');
let charDivs = childDiv.querySelectorAll('.characterCard');

searchBtn.addEventListener('click', () => {
  charDivs.forEach((charDiv) => {
    childDiv.removeChild(charDiv);
  });
});

    Aquí, seleccionamos todos los elementos con clase characterCard dentro de childContainer utilizando querySelectorAll(), y luego recorremos todos ellos para eliminar cada uno individualmente usando .forEach().

Comments are closed.