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 parentNode
que você deseja remover. Se the childNode
nã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
ul
elemento com o idmenu
usando ogetElementById()
método. - Em seguida, remova o último elemento do
ul
elemento usando oremoveChild()
método. Amenu.lastElementChild
propriedade retorna o último elemento filho domenu
.
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
firstChild
propriedade. - 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 menu
elemento:
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 innerHTML
propriedade 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.