Remover todos os elementos filhos com JavaScript

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>

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

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!

Removendo os filhos com removeChild e um laço:

O innerHTML resolve rápido, mas não é o único jeito

Tem gente que prefere ir removendo nó por nó, e pra isso usamos o removeChild junto de um while

A ideia é: enquanto o elemento pai tiver um primeiro filho, a gente remove esse filho

Veja o JavaScript:

const div = document.querySelector(".container");

while (div.firstChild) { div.removeChild(div.firstChild); }

Aqui a condição do while checa se ainda existe firstChild

Enquanto existir, o removeChild tira ele do pai

Quando não sobra mais nenhum filho, firstChild vira null e o laço para sozinho

O resultado final é o mesmo do innerHTML: a div fica limpa

E o jeito mais novo? replaceChildren():

O JavaScript moderno trouxe um método que faz isso numa linha só

É o replaceChildren, chamado sem passar nenhum argumento

Veja:

const div = document.querySelector(".container");

div.replaceChildren();

Sem argumento nenhum, ele substitui os filhos atuais por nada, ou seja, esvazia o elemento

Fica bem legível e direto ao ponto

Bora ver na prática? Testa os três jeitos no mesmo HTML e repara que todos deixam a div vazia do mesmo jeito

Qual desses eu uso? innerHTML, removeChild ou replaceChildren:

Os três limpam o elemento, então a dúvida é qual escolher

O innerHTML = "" é o mais curto e resolve na maioria dos casos do dia a dia

Tome cuidado com um detalhe: ao reescrever o innerHTML você recria o HTML de dentro, e listeners de evento que estavam presos nos filhos antigos se perdem no processo

Se você quer controle nó por nó, ou está removendo de forma condicional, o removeChild dentro do while te dá esse controle

Já o replaceChildren é o meio termo moderno: uma linha, legível, e sem montar o HTML a partir de string

Resumindo: pra um esvaziamento rápido, innerHTML resolve; pra código mais novo e limpo, replaceChildren; pra ir filho a filho, removeChild