Come rimuovere un elemento HTML usando JavaScript?

Le manipolazioni DOM JavaScript consentono a un utente di eliminare qualsiasi elemento dalla pagina Web HTML utilizzando la rimuovere() metodo. Tuttavia, in JavaScript è richiesto un riferimento al suo nodo. Solo con quel riferimento può essere rimosso un elemento dalla pagina web. IL rimuovere() Il metodo rimuove l'elemento HTML dal modello a oggetto documento della pagina Web prendendo l'elemento come nodo. Diamo un'occhiata alla sintassi del rimuovere() Metodo disponibile per tutti gli elementi della pagina HTML.

Sintassi del metodo remove ()

La sintassi del metodo Rimuovi è fornita come

elemrefference.rimuovere();

Dalla sintassi sopra, è evidente che devi solo applicare il rimuovere() su un elemento o su un nodo per rimuoverlo e non sono richiesti parametri aggiuntivi.

Esempio: rimuovere un elemento da una pagina Web HTML

Per dimostrare l'uso del rimuovere() Metodo, crea una pagina Web HTML con un po 'di testo e un pulsante che utilizza le righe del codice all'interno del tag:

Vuoi rimuovermi!

Cliccami per rimuovere

Notare che un al clic() L'attributo è stato aggiunto con il pulsante che cercherà il Buttonclicked () Metodo all'interno del file di script. E il paragrafo da rimuovere ha l'ID come "MyText"

Eseguire la pagina Web HTML. Vedrai la seguente schermata sul browser:

Per aggiungere funzionalità sul clic del pulsante, vai al file di script e crea il Buttonclicked () funzione con le seguenti righe di codice:

Funzione ButtonClicked ()
// le righe imminenti devono essere posizionate dentro qui

All'interno di questa funzione, il primo passo è ottenere un riferimento al paragrafo da rimuovere usando il getElementById () metodo come

VAR ELEM = Documento.getElementById ("MyText");

Il riferimento è stato memorizzato all'interno del Elem variabile. Usa il rimuovere() metodo su questo Elem variabile con l'aiuto dell'operatore DOT

Elem.rimuovere();

L'intero snippet del codice script sarà come i seguenti:

Funzione ButtonClicked ()
VAR ELEM = Documento.getElementById ("MyText");
Elem.rimuovere();

Esegui la pagina Web e fai clic sul pulsante per rimuovere il tag paragrafo con l'ID "MyText":

E l'elemento è stato rimosso dalla pagina web HTML e anche dal DOM.

Conclusione

Con ogni elemento HTML, esiste una funzione integrata che viene fornita con ES6 JavaScript che sradica l'elemento dalla pagina web HTML e DOM. Questo metodo è chiamato il rimuovere() metodo e viene applicato all'elemento usando un operatore DOT. Il metodo Rimovi () non richiede argomenti e non restituisce alcun valore. Questo articolo ha dimostrato il metodo di funzionamento del timoro ().