JavaScript Academy · Aula

Removendo e substituindo nós

Remova e substitua elementos com segurança.

Removendo e substituindo nós é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Removendo nós

Além de adicionar elementos, muitas vezes é necessário removê-los ou trocá-los. Os métodos modernos do DOM tornam isso conciso e fácil de ler.

remove

remove desanexa um elemento diretamente do DOM, sem precisar de uma referência ao pai.

const alert = document.querySelector(".alert");
alert.remove();

removeChild

O removeChild, mais antigo, é chamado no pai e retorna o nó removido, permitindo reutilizá-lo.

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

Removendo vários nós

Para limpar todos os filhos, repita a operação até não restar nenhum ou defina innerHTML como uma cadeia de caracteres vazia (é rápido, mas descarta as referências).

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

replaceWith

replaceWith troca um elemento por um ou mais nós ou cadeias de caracteres novos em uma única chamada.

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWith com vários nós

replaceWith aceita vários argumentos, permitindo substituir um nó por muitos.

old.replaceWith(headerEl, bodyEl);

replaceChild

O replaceChild(newNode, oldNode) clássico é chamado no pai. Preste atenção à ordem dos argumentos: o novo vem primeiro e o antigo, depois.

list.replaceChild(newItem, oldItem);

Nós desanexados persistem

Um nó removido não é destruído. Se mantiver uma referência a ele, poderá reinseri-lo mais tarde, o que é útil em padrões de exibição e ocultação.

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

replaceChildren substitui todos os filhos de um elemento de uma só vez ou os limpa quando chamado sem argumentos.

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

Memória e ouvintes

Remover um elemento também impede que seus ouvintes de eventos sejam acionados enquanto ele estiver desanexado. Se você o adicionar novamente, os ouvintes ligados ao próprio elemento permanecerão.

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

Escolhendo um método

Prefira remove e replaceWith para obter um código moderno e limpo. Use removeChild/replaceChild quando precisar do nó retornado ou tiver de oferecer suporte a ambientes muito antigos.

Verificação rápida

Verifique a ordem dos argumentos.

Recapitulação

Remova nós com o remove moderno ou com o removeChild baseado no pai. Troque-os com replaceWith (moderno e com vários argumentos) ou replaceChild(newNode, oldNode). Use replaceChildren para redefinir todos os filhos. Nós desanexados permanecem na memória e podem ser reinseridos mais tarde.

Perguntas Frequentes

A aula “Removendo e substituindo nós” é grátis?

Sim — o texto completo de “Removendo e substituindo nós” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Removendo e substituindo nós”?

Remova e substitua elementos com segurança. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Removendo e substituindo nós”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy