Removendo elementos: desconstruindo a página

Descubra como o JavaScript pode remover elementos HTML existentes.

Até agora, você aprendeu a criar e modificar elementos no DOM.
Agora chegou a hora de fazer o caminho inverso: remover elementos da página.

Pense no DOM como uma estante de caixas.
Se uma caixa não serve mais (ex.: item concluído, aviso antigo, card duplicado), você pode retirar ela da estante.

Quando remover elementos é útil?

Você vai usar isso muito em cenários como:

  • excluir tarefa de uma lista
  • fechar um alerta/aviso
  • remover card de produto
  • apagar resultados antigos antes de renderizar novos
  • limpar itens de uma área dinâmica

Método principal: remove()

A forma mais simples é chamar remove() no próprio elemento.

<p id="aviso">Promoção por tempo limitado</p>

const aviso = document.getElementById("aviso");
aviso.remove();

Pronto: o parágrafo sai da página.

Removendo com evento (caso real)

<li class="tarefa">Estudar DOM <button class="btn-remover">Remover</button></li>

const botao = document.querySelector(".btn-remover");

botao.addEventListener("click", function () {
  const tarefa = botao.parentElement;
  tarefa.remove();
});

Aqui, ao clicar no botão, removemos o item da lista.

Método alternativo: parent.removeChild(filho)

Também existe um jeito mais antigo e ainda válido:

const lista = document.getElementById("lista");
const item = document.getElementById("item-1");

lista.removeChild(item);

Esse formato exige referência do pai e do filho.

Diferença: remover do DOM vs esconder com CSS

  • remove() → tira o elemento do DOM.
  • style.display = "none" → só esconde visualmente, mas o elemento continua no DOM.

Use remoção quando o item realmente não deve mais existir na estrutura.

Verificando se elemento existe antes de remover

Evita erro em situações dinâmicas:

const modal = document.getElementById("modal");

if (modal) {
  modal.remove();
}

Removendo vários elementos

Quando há vários elementos do mesmo tipo:

const avisos = document.querySelectorAll(".aviso");

avisos.forEach(function (aviso) {
  aviso.remove();
});

Boas práticas

  • Confirme a ação quando houver risco de apagar algo importante.
  • Valide se o elemento existe antes de remover.
  • Prefira remove() para simplicidade.
  • Em listas dinâmicas, combine com eventos de clique e seletores corretos.

Resumo da lição

  • Remover elemento é comum em interfaces dinâmicas.
  • element.remove() é o jeito mais direto.
  • parent.removeChild(child) também funciona.
  • Remover é diferente de apenas esconder.
  • Saber remover bem ajuda a manter a página limpa e funcional.