rimuovere elemento in html da javascript

**Adanf** · 08-02-2013, 02:43

Salve a tutti, io ho una situazione tipo questa:

codice:

function createtype(){
	var inpt= document.createElement("input");
	inpt.type="button";
	document.body.appendChild(inpt);
	var kus = inpt;
	inpt.onclick=function(){
	         inpt.parentNode.removeChild(inpt);
	}
}

Il tutto è caricato ovviamente in un <body onload>.

Mettiamo il caso che creo altre variabili istanza di *inpt*(che fanno riferimento allo stesso elemento come la variabile *kus*) in giro per il mio codice.

Ora prendiamo in considerazione *inpt.onclick* nel quale elimino dal documento l'elemento creato precedentemente, in questo caso però, renderebbe invalidata anche la variabile *kus*.

Detto ciò, se invece volessi rimuovere dal documento l'elemento "input" solo se non è usato da altre istanze presenti nel codice, come potrei fare?

Grazie mille

**Adanf** · 08-02-2013, 19:19

Nessuno mi può aiutare?

**sgogghy** · 09-02-2013, 04:00

Scusa ma non ho capito niente

Potresti spiegare cosa si deve vedere a video al caricamento della pagina e quali sono gli eventi e cosa scatenano?

**Adanf** · 09-02-2013, 21:09

In questo caso (visto che è solo un test) a caricamento della pagina html si vede solo un oggetto button.
L'oggetto poi viene istanziano in due variabili javascript differenti (*inpt* e *kus*).
Poi nell'evento -onclick- dell'oggetto viene inserito il codice per "autoeliminarsi" dal documento tramite la variabile istanza *inpt*.

Ovviamente quando clicco il pulsante, entrambi le variabili *inpt* e *kus* che facevano riferimento allo stesso oggetto, diventeranno entrambi "undefined".

Quello che voglio sapere è come poter eliminare un oggetto dal documento solo se non esiste più nessuna variabile che faccia riferimento a quell'oggeto.

Spero di essermi spiegato meglio adesso, anche perchè il concetto è abbastana semplice.

**carlomarx** · 10-02-2013, 05:37

Originariamente inviato da Adanf
in questo caso però, renderebbe invalidata anche la variabile *kus*.

Rimuovere un elemento dal DOM non cancella l'elemento: semplicemente lo slega dal resto del documento. Di conseguenza la tua variabile "kus" non sarà mai undefined ma continuerà a contenere il medesimo oggetto, che però non sarà più "appeso" da nessuna parte. Potrai però sempre lanciare nuovamente document.body.appendChild(kus).

Originariamente inviato da Adanf
Detto ciò, se invece volessi rimuovere dal documento l'elemento "input" solo se non è usato da altre istanze presenti nel codice, come potrei fare?

È sbagliato l'approccio. Di solito quando si rimuove un elemento dal DOM non si "cancellano" le variabili che lo contenevano. Tanto ai fini del garbage collector non cambia nulla, dato che il DOM è sempre accessibile. Insomma, ripulire le variabili in questo caso non ti ripulirà la memoria. Tieniti le variabili contenenti l'oggetto e amen.

Originariamente inviato da Adanf
Salve a tutti, io ho una situazione tipo questa:

codice:

function createtype(){
	var inpt= document.createElement("input");
	inpt.type="button";
	document.body.appendChild(inpt);
	var kus = inpt;
	inpt.onclick=function(){
	         inpt.parentNode.removeChild(inpt);
	}
}

Cerca di evitare le closures quando non sono strettamente necessarie…:

codice:

function removeMe () {
         this.parentNode.removeChild(this);
}

function createtype () {
	var inpt= document.createElement("input");
	inpt.type="button";
	document.body.appendChild(inpt);
	// var kus = inpt;
	inpt.onclick = removeMe;
}

**Adanf** · 10-02-2013, 16:02

Grazie della risposta, ma evidentemente mi son spiegato peggio di quanto pensassi.
Come dici tu le variabili non vengono cancellate ma viene solo slegato l'elemento DOM dal documento, ed è proprio questo il mio problema.
Ora prendiamo in considerazione le due variabili di prima solo che invece di essere usate assieme , vengono istanziate in due funzioni diverse che hanno due compiti completamente diversi e lavorano indipendentemente l'una dall'altra ma usano lo stesso elemento del DOM, cioè il pulsante di prima.
Quindi se per caso in una delle due funzioni io richiamo "removeChild" ovviamente anche per l'altra funzione l'elemento non fa più parte del DOM, cosa che potrebbe essere un problema, visto che come detto prima lavorano in maniera indipendente.

Perciò come posso fare a sapere se l'elemento DOM è ancora "legato" a qualche variabile presente nel documento prima di slegarlo dal documento?

Grazie mille.

**carlomarx** · 10-02-2013, 20:16

usa la proprietà parentNode...:

codice:

var elemento = document.createElement("span");
alert(Boolean(elemento.parentNode)); // false: l'elemento è slegato

document.body.appendChild(elemento);
alert(Boolean(elemento.parentNode)); // true: l'elemento è legato

document.body.removeChild(elemento);
alert(Boolean(elemento.parentNode)); // false: l'elemento è slegato

Discussione: rimuovere elemento in html da javascript

Strumenti discussione

Ricerca discussione

Visualizza

rimuovere elemento in html da javascript

Permessi di invio