Método removeChild() do Elemento DOM HTML

Definição e uso

removeChild() Este método remove os nós filhos do elemento.

Este método retorna o nó Node; se o nó não existir, retorna null.

Dica

Os nós filhos são removidos do modelo de objeto de documento (DOM).

No entanto, pode-se modificar o nó retornado e inseri-lo novamente no DOM (veja o exemplo abaixo).

Veja também:

Método remove()

Método appendChild()

Método insertBefore()

Método replaceChild()

Propriedade childNodes

Propriedade firstChild

Propriedade lastChild

Propriedade firstElementChild

Propriedade lastElementChild

Exemplo

Exemplo 1

Remova o primeiro elemento da lista:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Antes da exclusão:

  • Café
  • Chá
  • Leite

Após a exclusão:

  • Chá
  • Leite

Experimente você mesmo

Exemplo 2

Se a lista tiver nós filhos, remova o primeiro (índice 0):

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Experimente você mesmo

Exemplo 3

Remova todos os nós filhos da lista:

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Experimente você mesmo

Exemplo 4

Remova um elemento de seu nó pai:

element.parentNode.removeChild(element);

Experimente você mesmo

Exemplo 5

Remova um elemento de seu elemento pai e insira novamente:

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Experimente você mesmo

Exemplo 6: Prompt

Use appendChild() ou insertBefore() para inserir o nó removido no mesmo documento.

Você pode usar document.adoptNode() ou document.importNode() para inserir em outro documento.

O exemplo a seguir remove um elemento de seu elemento pai e o insere em outro documento:

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

Experimente você mesmo

Sintaxe

element.removeChild(node)

ou

node.removeChild(node)

Parâmetro

Parâmetro Descrição
node Obrigatório. O nó (elemento) a ser removido.

Retorno

Tipo Descrição
Node

Nó (elemento) removido.

Se o nó filho não existir, o valor é null.

Suporte do navegador

element.removeChild() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam plenamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte