Cancellare tutti i childNodes di un’elemento DOM

ottobre
1

Cancellare tutti i childNodes di un’elemento DOM

Inserito In: Javascript Scritto da Luca Bottoni

Sembrerà strano, ma quanto per la prima volta cercai di cancellare i figli di un’ elemento DOM (Document Object Model) mi ritrovai in difficoltà perchè sbagliavo l’approccio. Viene naturale subito cercare di cancellare tutti gli elementi utilizzando un ciclo for e la chiave numerica dei ChildNodes. Esempio, immaginiamo di avere una lista con 5 elementi:


<ul id="padre">
<li id="figlio_0">Elemento A</li>
<li id="figlio_1">Elemento B</li>
<li id="figlio_2">Elemento C</li>
<li id="figlio_3">Elemento D</li>
<li id="figlio_4">Elemento E</li>
</ul>

Ogni pagina Html è costruita utilizzando il modello DOM e nel nostro esempio avremo un padre (tag ul) e 5 figli (tags li), pertanto a livello di JS potremo raggiungere l’elemento “A” come figlio “0” (childNodes), un’ esempio concreto di codice darà maggiore chiarezza (ricordatevi che la matrice dei figli è come una array e il primo valore è sempre 0):


//Elemento Padre dentro una variabile
padre=document.getElementById("padre");
//Figlio A
figlioA=padre.chileNodes[0];
//oppure direttamente se avete la id
aliasfiglioA=document.getElementById("figlio_0");

Bene, torniamo al nostro problema iniziale, quello che viene naturale non sapendo il numero dei figli di un’elemento DOM è quello di sapere la quantità dei figli e poi con un ciclo for cancellarli.

padre=document.getElementById(“padre”);
nChild= padre.length;//numero di figli

//ciclo for

for(a=0;a

Vuoi lasciare un tuo commento?

Attenzione: L'approvazione e l'invio del commento potrebbero avere dei ritardi, quindi, dopo aver premuto il pulante "Invia Commento" attendi.


*