Come rimuovere un elemento HTML usando JavaScript?
Il modo più atomico per rimuovere un elemento dalla pagina Web HTML è utilizzare Rimove () su quell'elemento. Per applicare qualsiasi metodo a un elemento HTML, l'utente deve creare un riferimento a quell'elemento all'interno del codice JavaScript.
Questo articolo dimostrerà come rimuovere un elemento da un documento HTML con l'aiuto di un esempio.
Il metodo Rimuovi ()
Il metodo Rimuovi (come menzionato sopra) viene utilizzato per rimuovere un elemento su cui viene applicato dal documento HTML. La sintassi del metodo Rimuovi è la seguente:
Elemref.rimuovere()In questa sintassi, Elemref è il riferimento dell'elemento HTML all'interno del codice JavaScript. Questa funzione non assume alcun parametro, né restituisce nulla. Diamo un'occhiata ad alcuni esempi
Esempio1: Rimozione di un elemento usando la sua classe
Inizia creando un nuovo file HTML e posiziona le seguenti righe all'interno di quel file:
Ho la classe "rimoveme", quindi rimuovermi!
Di Linuxhint
In queste righe, viene creato un semplice tag con la classe impostata su "rimuovimi". L'esecuzione di questo documento HTML visualizza la seguente uscita sul terminale:
L'output mostra il file
Tag sullo schermo. IL è solo un segnaposto in modo che la pagina web non sia vuota quando l'elemento viene rimosso. Successivamente, aggiungi semplicemente un pulsante che rimuoverà l'elemento al pulsante Premere e impostare il valore OnClick su ButtonClicked ():
Questo ci dà la seguente pagina web:
Il pulsante viene aggiunto alla pagina Web, ora nel tag aggiungi le seguenti righe:
Funzione ButtonClicked ()Elem = documento.getElementsByClassName ("Removeme");
Elem.rimuovere();
Nelle righe sopra:
- Viene creato il pulsante di funzione (), che verrà eseguito al momento della pressione del pulsante Rimuovi
- All'interno della funzione, un riferimento all'elemento da rimuovere viene creato utilizzando il suo nome di classe
- Successivamente, il metodo Rimovi () viene chiamato sull'elemento per rimuoverlo dal documento HTML
Esegui ora il codice per ottenere i seguenti risultati:
Non appena viene premuto il pulsante, l'elemento con ClassName = "REMOVEME" viene rimosso dal documento HTML.
Esempio 2: rimozione di un elemento usando il suo ID
Crea un documento HTML, e proprio come nell'esempio 1, crea un tag P e un pulsante, ma questa volta, dai il
tagga un ID invece della classe:
Questa volta, ho l'ID come "rimoveme", quindi rimuovermi!
Di Linuxhint
Questo darà il seguente output sul browser:
Successivamente, nel file di script aggiungi le seguenti righe:
Funzione ButtonClicked ()Elem = documento.getElementsByID ("rimoveme");
Elem.rimuovere();
Nelle righe sopra:
- Viene creato il pulsante di funzione (), che verrà eseguito al momento della pressione del pulsante Rimuovi
- All'interno della funzione, un riferimento all'elemento da rimuovere viene creato utilizzando il suo id = "rimozione"
- Successivamente, il metodo Rimovi () viene chiamato sull'elemento per rimuoverlo dal documento HTML
Eseguire l'elemento HTML e premere il pulsante crea il seguente risultato:
L'elemento con l'ID come "rimoveme" è stato rimosso dal documento HTML
Conclusione
Il metodo Rimuovi () può essere applicato su un elemento per rimuoverlo dal DOM del documento HTML. Tuttavia, per applicare questo metodo a un elemento, è necessario prima fare un riferimento all'elemento. E quindi, il metodo REMOVE () viene utilizzato su quel riferimento di quell'elemento usando l'operatore DOT. Questo articolo ha spiegato il metodo di funzionamento del metodo Rimovi ().