jQuery ha una funzione destinata solo a rimuovere gli elementi figli dall’interno di un altro elemento. Il metodo “empty()” può essere utilizzato direttamente sull’oggetto.
Considera il codice HTML di seguito.
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>
Per rimuovere tutti i paragrafi all’interno dell’elemento “myDiv” basta usare il seguente codice in jQuery.
1$("#myDiv").empty();
Ma come possiamo eseguire questa stessa operazione usando solo JavaScript?
Rimozione di elementi figlio da un nodo DOM utilizzando JavaScript
JavaScript consente al programmatore di rimuovere elementi da un nodo DOM tramite varie proprietà. Impariamo come eseguire questa rimozione utilizzando ciascuno di essi.
innerHTML
Una di queste proprietà è “innerHTML”. Consente di sostituire tutto l’HTML interno dell’elemento. Compreso di essere sostituito da una stringa vuota, rendendo vuoto l’elemento in questione.
Per rimuovere tutti i nodi all’interno dell’elemento “myDiv” utilizzare il seguente JavaScript.
1document.getElementById("myDiv").innerHTML = "";
Di seguito puoi vedere un esempio completo in HTML. Qui utilizziamo un pulsante per rimuovere gli elementi.
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
La proprietà “textContent” può essere utilizzata per sostituire tutti gli elementi all’interno di un nodo con una stringa vuota.
A seconda del browser, l’utilizzo di “textContent” potrebbe avere prestazioni migliori rispetto a “innerHTML”.
1document.getElementById("myDiv").textContent = "";
Rimuovere gli elementi figlio usando un ciclo (“lastChild”)
Nell’esempio seguente, utilizziamo il ciclo “while” per verificare se il nostro elemento contiene il primo figlio. Se true, indica che c’è almeno un elemento figlio all’interno dell’elemento padre, quindi il ciclo rimuove l’ultimo elemento. E il processo si ripete.
La rimozione dell’ultimo elemento utilizzando la proprietà “lastChild” di solito ha prestazioni migliori rispetto alla rimozione del primo elemento utilizzando la proprietà “firstChild”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Rimuovere gli elementi figlio usando un ciclo (“lastElementChild”)
Qui otterremo lo stesso risultato, ma preservando i “non elementi” come i nodi di testo “#text” e i commenti “<!– comments –>”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Un’altra caratteristica di “lastElementChild” consiste nel preservare i nodi figlio all’interno dell’elemento padre che non sono discendenti diretti.
Ad esempio, considera la struttura degli elementi di seguito.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
Quando si utilizza “lastElementChild”, il “First node” e il “Second node” vengono rimossi. “Node 1” e “Node 2” non verrebbero rimossi.
Rimuovi gli elementi figlio con il metodo “remove”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
La funzione “rimuovi” è stata aggiunta in ES5. Ha una sintassi di concatenamento più semplice e diretta. Ha già un eccellente supporto in molti browser .
Rimuovere gli elementi con il metodo “replaceChildren”.
C’è anche la possibilità di rimuovere elementi figlio da un nodo DOM utilizzando l’API “replaceChildren”. Questo metodo consente non solo di rimuovere elementi all’interno di un elemento padre, ma anche di sostituirli con altri elementi in una sola operazione.
Per rimuovere solo gli elementi figlio, chiama l’API senza argomenti.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
L’API “replaceChildren” è già ben supportata dai browser moderni .