2011-03-04 13 views
7

La funzione removeChild elimina veramente completamente il nodo figlio? O rimuove solo l'elemento che è figlio del nodo parente specificato? Se in realtà non elimina l'elemento, c'è un modo per eliminare completamente l'elemento?removeChild elimina davvero l'elemento?

risposta

14

Il metodo removeChild semplicemente lo rimuove dal suo genitore. Se è un elemento visibile della pagina, verrà rimosso dalla pagina.

Ma Javascript ha garbage collection. Ciò significa che l'oggetto nodo stesso rimarrà in esistenza fintanto che qualsiasi variabile si riferisca ad esso. Quindi puoi assegnare un nodo a una variabile, usare removeChild per "sfoltirlo" dal suo nodo genitore, e in seguito, inserirlo o aggiungerlo ad un altro nodo, quindi spostarlo efficacemente sulla pagina.

Il codice seguente rimuove un nodo, e attendere 10 secondi prima di aggiungerlo alla struttura (e quindi, alla pagina):

var oldNode = someNode.removeChild(...); 
setTimeout(function() { 
    document.documentElement.appendChild(oldNode); 
}, 10000); 

Ciò significa che l'oggetto nodo non e 'stato cancellato dalla memoria, perché c'è ancora una variabile che punta ad esso (vale a dire, oldNode).

Un altro caso:

var node = document.getElementById('test'); 
// ... do stuff 
node.parentElement.removeChild(node); 
// 'node' still exists, but has been removed from the page 
// ... do some more stuff 
node = document.getElementById('hello'); 
// The variable 'node' now points to something else; 
// this means the original node will be deleted from memory 

Se, d'altra parte, è non lo fanno riassegnare il nodo rimosso a un'altra variabile, non è possibile accedere più (non tramite l'albero del documento, in quanto è stato rimosso da lì e non tramite una variabile JS); così Javascript eliminerà automaticamente dalla memoria:

someNode.removeChild(...); 

Assegnazione del nodo rimosso a una variabile, e assegnando null (o qualsiasi altra cosa) per quella variabile - come Marc B suggerisce nella sua risposta - è del tutto inutile e, IMHO, sciocco.

1

removeChild rimuove l'elemento dal dom, ma viene anche restituito dalla funzione nel caso in cui si stia effettuando la rimozione per reinserirlo altrove. Dovreste uccidere quel valore di ritorno per ottenere davvero liberarsi del nodo rimosso:

oldNode = someNode.removeChild(...); 
oldNode = null; 
+0

Oh, grazie :) –

+5

Non semplicemente non assegnando il valore restituito a qualcosa ha lo stesso effetto? – awm

+1

Null è conveniente e rende evidente che stai rovinando il valore. facendo 'oldNode = 'cancella questo nodo per favore';' sembra solo uno spreco di caratteri. –

10

Questo sarà completamente eliminare il nodo:

someNode.removeChild(...); 

Questo eliminerà il nodo dal DOM quindi non è visibile ma salverà in modo che è possibile inserire altrove:

oldNode = someNode.removeChild(...); 
+1

Il primo esempio è corretto, ma avevo una situazione in cui non sembrava funzionare, ad es.'var aChild = document.createElement (...); someNode.appendChild (aChild); ... someNode.removeChild (aChild); 'Il nodo rimane a causa del riferimento alla variabile aChild. In tal caso è necessario "eliminare una bambina" per completare il lavoro. – CyberFonic

+0

Da un altro contesto (in cui potresti non sapere se ci sono altri riferimenti al nodo rimosso), puoi controllare per vedere in quale stato si trova il nodo rimosso 'node.parentElement == null' –

+0

Questo non tiene conto altri riferimenti al nodo. Significato se il nodo è referenziato altrove, 'removeChild' non cancellerà completamente il nodo. –

1

Se si desidera eliminare veramente un elemento dom. removeChild da solo non è abbastanza. Questo è come Steve Sounders che è l'autore di YSlow. È necessario utilizzare eliminare