Resumo : neste tutorial, você aprenderá como remover todos os nós filhos de um nó usando os métodos JavaScript DOM.
Para remover todos os nós filhos de um nó, use as seguintes etapas:
- Primeiro, selecione o primeiro nó filho (
firstChild) e remova-o usando oremoveChild()método. Depois que o primeiro nó filho for removido, o próximo nó filho se tornará automaticamente o primeiro nó filho. - Segundo, repita as primeiras etapas até que não haja nenhum nó filho restante.
A removeAllChildNodes()função a seguir remove todos os nós filhos de um nó:
function removeAllChildNodes(parent) {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}Linguagem de código: PHP ( php )Suponha que você tenha o seguinte documento HTML:
<html lang="en">
<head>
<title>Remove All Child Nodes</title>
</head>
<body>
<div id="container">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</div>
</body>
</html>Linguagem de código: HTML, XML ( xml )O script a seguir removerá todos os nós filhos do <div>com o id container:
function removeAllChildNodes(parent) {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
const container = document.querySelector('#container');
removeAllChildNodes(container);Linguagem de código: PHP ( php )Cuidado: innerHTML
O código a seguir também remove todos os nós filhos de um nó:
parent.innerHTML = '';Linguagem de código: PHP ( php )No entanto, não é recomendado porque não remove os manipuladores de eventos dos nós filhos, o que pode causar vazamento de memória.
