Neste artigo você vai aprender a remover todos os elementos filhos com JavaScript puro, utilizando funções do DOM
Fala programador(a), beleza? Bora aprender mais sobre DOM, remoção de elementos e também sobre a linguagem JavaScript!
Para remover todos os elementos que são filhos de um elemento do DOM, podemos simplesmente limpar a innerHTML
Uma propriedade que contém todos os nós filhos de um determinado elemento
Então vamos criar uma situação prática para demonstrar a solução do problema
Veja este HTML:
<div class="container"> <p>Parágrafo</p> <p>Parágrafo</p> <p>Parágrafo</p> </div>
Nossa missão será remover todos os elementos de parágrafo que estão na div com classe container
Veja o JavaScript necessário:
const div = document.querySelector(".container");
div.innerHTML = "";Primeiramente selecionamos a div com classe de container, com o método querySelector
Depois atribuimos o valor de uma string vazia para innerHTML
Isso faz com que os elementos sejam eliminados do nosso HTML, então resolvemos o nosso problema!
Note que você pode condicionar esta ação a um evento, como um clique
Conclusão
Neste artigo você aprendeu a como remover todos os elementos filhos com JavaScript puro
Apenas precisamos limpar a propriedade innerHTML do elemento pai, isso pode ser feito via atribuição
Igualando a propriedade a uma string vazia
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!