Come removeChild utilizzando una variabile String

March 21

Come removeChild utilizzando una variabile String


funzioni JavaScript in grado di rimuovere gli elementi in un documento HTML o XML in modo dinamico. Includendo funzioni JavaScript all'interno del markup per una pagina Web, è possibile modificare il contenuto della pagina mentre l'utente sta visualizzando e interagire con esso. Il codice JavaScript funziona acquisendo dapprima un riferimento all'elemento genitore, quindi istruire il browser per rimuovere uno degli elementi secondari con il metodo removeChild. È possibile rimuovere un elemento figlio specifico riferimento ad essa all'interno della chiamata al metodo. Per identificare entrambi gli elementi figlio e padre, è possibile utilizzare le variabili stringa di testo che rappresentano i loro attributi ID.

istruzione

1 Aggiungere genitore e elementi figli al documento. Il seguente codice HTML di esempio dimostra una semplice struttura di genitore e bambino albero all'interno di una pagina web:
<Div id = "esterno">
esterno
<Div id = "interno">
interno
</ Div>
</ Div>

Le proprie strutture possono contenere elementi multipli, così come testo, dati e contenuti multimediali. L'elemento esterno rimuoverà l'elemento interno quando la funzione JavaScript eseguito.

2 Aggiungere un elemento di ingresso al markup. La vostra funzione può eseguire su eventi specifici, ma per la dimostrazione è possibile aggiungere il seguente codice se si utilizza un documento HTML:
<Input type = valore "pulsante" = "rimuovere" onclick = "removeElement ()" />

Questo crea un elemento fondamentale tasto di input. Il pulsante è impostato per chiamare una funzione specifica JavaScript quando l'utente preme esso.

3 Aggiungere il codice JavaScript per il documento. Il codice di esempio riportato di seguito illustra una sezione JavaScript nell'elemento testa HTML di una pagina web:
<Script type = "text / javascript">
Funzione removeElement () {
// Rimuove l'elemento figlio
}
</ Script>

Il proprio codice può essere in un file separato, se si preferisce. Questo schema funzione riflette la chiamata di funzione specificato nell'elemento di ingresso, in modo che il contenuto di questo estratto viene eseguito quando l'utente preme il pulsante.

4 Definire il vostro elemento ID attributi come variabili stringa. Aggiungere il seguente codice all'interno della vostra funzione JavaScript:
var parentElement = "esterno";
var childElement = "interno";

Queste linee definiscono i valori degli attributi ID degli elementi figlio e genitore. Aggiungere il seguente codice, acquisendo un riferimento a ogni elemento all'interno del documento:
var outElem = document.getElementById (parentElement);
var inElem = document.getElementById (childElement);

Il codice ha ora la possibilità di fare riferimento a ciascun elemento, effettuare modifiche sul contenuto.

5 Aggiungere il codice JavaScript per rimuovere l'elemento secondario. Inserire il seguente codice nel tuo funzione JavaScript:
outElem.removeChild (inElem);

Questo indica al browser di rimuovere l'elemento secondario specificato dal genitore. Salvare il file e aprirlo in un browser Web. Fare clic sul pulsante per testare la funzione. Si dovrebbe vedere l'elemento interno scomparire, lasciando l'elemento esterno.

Consigli e avvertenze

  • Opzionalmente si può passare le stringhe di attributo ID elemento come parametri alla funzione.
  • JavaScript può comportarsi in modo imprevedibile in alcuni browser Web, quindi assicuratevi di testare accuratamente le pagine.