JavaScript removeChild – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o removeChild()método JavaScript para remover um nó filho de um nó pai.

Introdução ao `removeChild()`método JavaScript

Para remover um elemento filho de um nó, você usa o removeChild()método:

let childNode = parentNode.removeChild(childNode);Linguagem de código:  JavaScript  ( javascript )

O childNodeé o nó filho do parentNodeque você deseja remover. Se the childNodenão for o nó filho de parentNode, o método lançará uma exceção.

Retorna removeChild()o nó filho removido da árvore DOM, mas o mantém na memória, que pode ser usada posteriormente.

Se não quiser manter o nó filho removido na memória, use a seguinte sintaxe:

parentNode.removeChild(childNode);
Linguagem de código:  CSS  ( css )

O nó filho ficará na memória até ser destruído pelo coletor de lixo JavaScript.

`removeChild()`Exemplo de JavaScript

Suponha que você tenha a seguinte lista de itens:

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About Us</li>
</ul>
Linguagem de código:  HTML, XML  ( xml )

O exemplo a seguir usa removeChild()para remover o último item da lista:

let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);
Linguagem de código:  JavaScript  ( javascript )

Como funciona:

Primeiro, obtenha o ulelemento com o id menuusando o getElementById()método.
Em seguida, remova o último elemento do ulelemento usando o removeChild()método. A menu.lastElementChildpropriedade retorna o último elemento filho do menu.

Junte tudo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript removeChild()</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Products</li>
        <li>About Us</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        menu.removeChild(menu.lastElementChild);
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Removendo todos os nós filhos de um elemento

Para remover todos os nós filhos de um elemento, siga as seguintes etapas:

Obtenha o primeiro nó do elemento usando a firstChildpropriedade.
Remover repetidamente o nó filho até que não haja mais nós filhos.

O código a seguir mostra como remover todos os itens da lista do menuelemento:

let menu = document.getElementById('menu');
while (menu.firstChild) {
    menu.removeChild(menu.firstChild);
}Linguagem de código:  JavaScript  ( javascript )

Você pode remover todos os nós filhos de um elemento definindo a innerHTMLpropriedade do nó pai como em branco:

let menu = document.getElementById('menu');
menu.innerHTML = '';Linguagem de código:  JavaScript  ( javascript )

Resumo

Use parentNode.removeChild()para remover um nó filho de um nó pai.
Lança parentNode.removeChild()uma exceção se o nó filho não puder ser encontrado no nó pai.