Come rimuovere un elemento con JavaScript

April 12

Come rimuovere un elemento con JavaScript


funzioni JavaScript possono aggiungere e rimuovere elementi in una pagina Web. Gli elementi HTML all'interno di una pagina Web sono organizzati in una struttura "ad albero", che è accessibile a funzioni JavaScript che operano all'interno della pagina. Navigando questa struttura, una funzione JavaScript è in grado di individuare primo elemento, quindi rimuoverlo utilizzando un riferimento al suo elemento genitore. Creazione di funzioni JavaScript per rimuovere gli elementi non è in genere difficile, ed è una buona abilità per imparare come si sviluppa competenze di programmazione web.

istruzione

1 Crea la tua pagina web contenente l'elemento che si desidera rimuovere. Immettere il seguente codice in un nuovo file in un editor di testo e salvarlo con ".html" come l'estensione del file:

<Html>

<Head>

</ Head>

<Body>

<Div id = "remove" onclick = "removeElem (this.id)"> Rimuovi Me </ div>

</ Body>

</ Html>

Questa è una pagina semplice esempio per dimostrare il principio di rimuovere un elemento HTML, la pagina contiene solo l'elemento da rimuovere. L'elemento è stata assegnata una funzione "onclick", il che significa che quando l'utente fa clic sopra, una funzione JavaScript verrà chiamata e l'elemento attributo "id" passato.

2 Crea il tuo funzione JavaScript. Inserisci una zona per il codice nella sezione head della pagina, tra i tag di apertura e chiusura della testa:

<Script type = "text / javascript">

// Funzione chiamata all'interno della pagina

Funzione removeElem (divID) {

// Rimuove l'elemento qui

}

</ Script>

Questa rappresenta la funzione di essere chiamato sul cliccando l'elemento di pagina. Si noti che il nome della funzione corrisponde alla funzione elemento "onclick". Il "divID" parametro rappresenta il valore ID passato quando l'elemento viene cliccato.

3 Individuare l'elemento viene cliccato. Aggiungere la seguente all'interno della vostra funzione JavaScript, tra le parentesi di apertura e funzione di chiusura:

var childElem = document.getElementById (divID);

Questo utilizza il valore ID passato per individuare l'elemento all'interno della pagina HTML. La variabile "childElem" ora contiene un puntatore all'elemento che è stato cliccato. È quindi possibile utilizzare questo riferimento per ulteriori elaborazioni.

4 Individuare l'elemento principale dell'elemento di essere cliccato. Per rimuovere un elemento, è necessario acquisire un riferimento al suo genitore, quindi indicare questo elemento per rimuovere l'elemento figlio che si sta tentando di distruggere. Aggiungere il seguente codice per ottenere un riferimento al genitore:

var = parentElem childElem.parentNode;

Il codice ora ha un riferimento all'elemento da rimuovere e suo elemento genitore.

5 Rimuovere l'elemento dalla pagina. Aggiungere il seguente codice, effettuare l'operazione di rimozione:

parentElem.removeChild (childElem);

Ciò richiede un metodo dell'elemento principale, istruendo per rimuovere l'elemento secondario specificato come parametro. Salvare il file e aprire la pagina in un browser Web per testarlo. Fare clic sul testo elemento e si dovrebbe vedere scomparire. Per provare di nuovo, aggiornare la pagina e cliccare nuovamente.

Consigli e avvertenze

  • funzioni JavaScript possono accedere e rimuovere ogni elemento della pagina.
  • Fare attenzione quando la rimozione di elementi nel caso in cui si fa riferimento accidentalmente e rimuovere quella sbagliata.