Hvordan fjerne et HTML -element ved hjelp av JavaScript?

JavaScript DOM -manipulasjoner lar en bruker slette ethvert element fra HTML -websiden ved å bruke fjerne() metode. Imidlertid kreves en henvisning til noden i JavaScript for å fjerne et element. Bare med den referansen kan et element fjernes fra websiden. De fjerne() Metoden fjerner HTML -elementet fra dokumentobjektmodellen til nettsiden ved å ta elementet som en node. La oss se på syntaksen til fjerne() Metode tilgjengelig for alle HTML -sideelementer.

Syntaks for fjerne () -metoden

Syntaksen til fjerningsmetoden er gitt som

Elemrefference.fjerne();

Fra syntaksen ovenfor er det tydelig at du bare trenger å bruke fjerne() på et element eller på en node for å fjerne det, og det kreves ingen ekstra parametere.

Eksempel: Fjern et element fra en HTML -webside

For å demonstrere bruken av fjerne() Metode, lag en HTML -webside med litt tekst og en knapp ved hjelp av kodelinjene inne i taggen:

Du vil fjerne meg!

Klikk meg for å fjerne

Legg merke til at en ved trykk() attributt er lagt til med knappen som kommer til å se etter knappklikket () Metode inne i skriptfilen. Og avsnittet for å fjerne har ID som "MYTEXT”

Utfør HTML -websiden. Du vil se følgende skjermbilde i nettleseren din:

For å legge til funksjonalitet på knappeklikk, kan du gå over til skriptfilen og opprette knappklikket () Funksjon med følgende kodelinjer:

funksjon Buttonclicked ()
// Kommende linjer skal plasseres her inne

Inne i denne funksjonen er det aller første trinnet å få en henvisning til avsnittet som skal fjernes ved å bruke getElementById () metode som

var elem = dokument.getElementById ("MyText");

Referansen er lagret inne i Elem variabel. Bruke fjerne() metode for dette Elem variabel ved hjelp av prikkoperatøren

Elem.fjerne();

Hele skriptkodeutdraget er som følgende:

funksjon Buttonclicked ()
var elem = dokument.getElementById ("MyText");
Elem.fjerne();

Utfør websiden og klikk på knappen for å fjerne avsnitts -taggen med ID "MYTEXT”:

Og elementet er også fjernet fra HTML -nettsiden og DOM.

Konklusjon

Med hvert HTML-element er det en innebygd funksjon som følger med ES6 JavaScript som utrydder elementet fra HTML-nettsiden og DOM. Denne metoden heter fjerne() metode og brukes på elementet ved hjelp av en prikkoperatør. Fjern () -metoden krever ingen argumenter og returnerer ingen verdi. Denne artikkelen demonstrerte arbeidet med å fjerne () -metoden.