O jQuery possui uma função destinada somente para remover todos os elementos filhos de dentro de outro elemento. O método “empty()” pode ser utilizado diretamente no objeto.
Considere o código HTML abaixo.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor sit amet</title>
5</head>
6<body>
7 <div id="myDiv">
8 <p>First paragraph</p>
9 <p>Second paragraph</p>
10 <p>Third paragraph</p>
11 <p>Fourth paragraph</p>
12 </div>
13 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
14</body>
15</html>
Para remover todos os parágrafos de dentro do elemento “myDiv” basta usar o seguinte código em jQuery.
1$("#myDiv").empty();
Mas como podemos executar essa mesma operação usando somente o JavaScript?
Removendo elementos filhos de um nó DOM usando JavaScript
O JavaScript permite que o programador remova elementos de um nó DOM através de diversas propriedades. Vamos aprender como fazer essa remoção usando cada uma delas.
innerHTML
Uma dessas propriedades é o “innerHTML”. Ela permite que todo o HTML interno do elemento seja substituído. Inclusive por uma string vazia, fazendo com que o elemento em questão fique vazio.
Para remover todos os nós filhos de dentro do elemento “myDiv” use o seguinte JavaScript.
1document.getElementById("myDiv").innerHTML = "";
Abaixo, você confere um exemplo completo em HTML. Aqui nós usamos um botão para remover os elementos.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Removing HTML elements using innerHTML</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv" style="border: 3px dashed red; margin-bottom: 20px;">
9 <p>First paragraph</p>
10 <p>Second paragraph</p>
11 <p>Third paragraph</p>
12 <p>Fourth paragraph</p>
13 </div>
14
15 <button id='removeElements'>Remove paragraphs (innerHTML)</button>
16
17 <script>
18 const button = document.getElementById("removeElements");
19 button.onclick = function () {
20 document.getElementById("myDiv").innerHTML = "";
21 };
22 </script>
23</body>
24</html>
textContent
A propriedade “textContent” pode ser usada para substituir todos os elementos de dentro de um nó por uma string vazia.
Dependendo do navegador, o uso do “textContent” pode ter um desempenho melhor do que o “innerHTML”.
1document.getElementById("myDiv").textContent = "";
Remover elementos filhos usando um loop (“lastChild”)
No exemplo abaixo, nós usamos o loop “while” para checar se dentro do nosso elemento existe o primeiro filho. Caso seja verdadeiro, indica que há pelo menos um elemento filho dentro do elemento superior, então o loop remove o último elemento. E o processo é repetido.
Remover o último elemento “lastChild” normalmente tem um desempenho superior ao invés de remover o primeiro elemento “firstChild”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Remover elementos filhos usando um loop (“lastElementChild”)
Aqui nós obteremos o mesmo resultado, porém preservando “non-Elements” como nós de texto “#text” e comentários “<!– comments –>”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Outra característica do “lastElementChild” é preservar nós filhos dentro do elemento pai que não são descendentes diretos.
Por exemplo, considere a estrutura de elementos abaixo.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
Ao usar “lastElementChild”, o “First node” e o “Second node” seriam removidos. Já o “Node 1” e o “Node 2” não seriam removidos.
Remover elementos filhos com o método “remove”
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
A função “remove” foi adicionada no ES5. Possui uma sintaxe mais simples e direta em forma de encadeamento. Já possui um suporte excelente em diversos navegadores .
Remover elementos com o método “replaceChildren”
Há também a possibilidade de remover os elementos filhos de um nó DOM usando a API “replaceChildren”. Esse método permite não só remover os elementos de dentro de um elemento pai, mas também substituí-los por outros elementos em apenas uma operação.
Para somente remover os elementos filhos, use a API sem nenhum argumento.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
A API “replaceChildren” já conta com um bom suporte entre os navegadores modernos .