Fjern alle elementer med spesifikk klasse ved hjelp av JavaScript

Mens du oppdaterer en webside eller nettstedet, er det visse elementer assosiert med funksjoner som må fjernes umiddelbart. For eksempel å utelate en bestemt funksjonalitet (med flere effekter) fra en webside på knappeklikk. I slike situasjoner er det å fjerne alle elementer med en spesifikk klasse ved hjelp av JavaScript en veldig nyttig funksjon i å lage en brukervennlig og spare tid på nettstedet.

Denne bloggen vil illustrere tilnærmingene for å fjerne alle elementer med spesifikke klasser ved hjelp av JavaScript.

Hvordan fjerne alle elementer med en bestemt klasse ved hjelp av JavaScript?

For å fjerne alle elementer med en spesifikk klasse ved hjelp av JavaScript, implementer følgende tilnærminger i kombinasjon med "for hver()”Og“fjerne()”Metoder:

• “QuerySelectorAll ()”Metode.
• “Array.fra()”Og“getElementsByClassName ()”Metoder.

La oss illustrere de uttalte metodene en etter en!

Tilnærming 1: Fjern alle elementer med spesifikk klasse i JavaScript ved hjelp av QuerySelectorAll () -metoden

“for hver()”Metode bruker en funksjon for hvert element som er inneholdt i en matrise. “fjerne()”Metode utelater et element fra dokumentet. Mens “QuerySelectorAll ()”Metode henter alle elementene som samsvarer med en CSS -velger (er) og gir en nodeliste til gjengjeld. Disse metodene kan brukes i kombinasjon for å hente forskjellige elementer med identiske klasser, iterere gjennom hvert element og fjerne dem på knappeklikket.

Syntaks

Array.foreach (funksjon (strøm, indeks, matrise), dette)

I den ovennevnte syntaks:

• funksjon: Det er funksjonen som skal utføres for hvert element i en matrise.
• nåværende: Denne parameteren betegner gjeldende matriseverdi.
• indeks: Det peker på det nåværende elementets indeks.
• Array: Det refererer til den nåværende matrisen.
• dette: Det tilsvarer verdien som blir gitt til funksjonen.

dokument.QuerySelectorAll (Selectors)

I den gitte syntaks:

• “velgere”Tilsvarer en eller flere enn en CSS -velger.

Eksempel
La oss gå gjennom følgende eksempel:

Dette er et bilde

Klikk for å fjerne elementer

Bruk følgende trinn i ovennevnte kodebit:

• I HTML -koden, "

  ”Og“”Elementer har henholdsvis de samme klassene.

• Opprett også en knapp som har en "ved trykk”Hendelse som påkaller funksjonen RemoveLements ().
• Nå, i JS -koden, erklærer en funksjon som heter “RemoveElement ()”.
• I sin definisjon, bruk "QuerySelectorAll ()”Metode og pek på den spesifiserte klassen mot elementene som angitt i første trinn.
• Etter det, påkalle “for hver()”Metode for å få tilgang til hvert element via iterasjon.
• Til slutt, bruk "fjerne()”Metode for å fjerne de itererte elementene i forrige trinn mot den hentede klassen.
• Dette vil resultere i at de fjerner alle elementer som har den aktuelle klassen på knappeklikk.

Produksjon

I output ovenfor kan det observeres at de synlige elementene på dokumentobjektmodellen fjernes på knappeklikk.

Tilnærming 2: Fjern alle elementer med spesifikk klasse i JavaScript ved hjelp av matrise.fra () og getElementsByClassName () Metoder

“Array.fra()”Metode returnerer en matrise fra et objekt som har lengden på matrisen som parameter. “getElementsByClassName ()”Metode gir et elements samling med et spesifisert klassenavn (er). Disse metodene kan kombineres for å få tilgang til elementene etter klasse og returnere og fjerne dem ved å iterere gjennom dem.

Syntaks

Array.Fra (objekt, kart, verdi)

I den ovennevnte syntaks:

• “gjenstand”Refererer til objektet som skal konverteres til en matrise.
• “kart”Tilsvarer kartfunksjonen som må kartlegges på hvert element.
• “verdi”Peker på verdien som skal brukes som“dette”For kartfunksjonen.

dokument.GetElementsByClassName (klasse)

I den gitte syntaks:

• “klasse”Representerer elementets klassenavn.

Eksempel
La oss gå videre til følgende eksempel:

Fjern elementene

Klikk for å fjerne elementer

I kodelinjene ovenfor:

• På samme måte, inkluder "

  ", og "”Elementer som har de samme klassene.

• Tilsvarende oppretter en knapp med en "ved trykk”Hendelse som omdirigerer til funksjonen RemovementLements ().
• I JavaScript -koden, definer en funksjon som heter “RemoveElements ()”.
• I sin definisjon, bruk "Array.fra()”Og“getElementsByClassName ()”Metoder i kombinasjon for å returnere de hentede elementene mot den spesifiserte klassen i form av en matrise.
• Etter det, bruk "for hver()”Og“fjerne()”Metoder for å iterere gjennom elementene i forrige trinn og fjerne dem på henholdsvis knappeklikk.

Produksjon

Ovennevnte utgang betyr at ønsket funksjonalitet er oppfylt.

Konklusjon

“for hver()”Og“fjerne()”Metoder kombinert med“QuerySelectorAll ()”Metode eller“Array.fra()”Og“getElementsByClassName ()”Metoder kan brukes til å fjerne alle elementer med spesifikke klasser ved hjelp av JavaScript. De tidligere metodene kan brukes for å få tilgang til elementene ved klassen direkte og fjerne dem ved å iterere langs dem og dermed involvere mindre kodekompleksitet. De sistnevnte metodene kan implementeres i kombinasjon for å få tilgang til elementene etter klasse, returnere dem i form av en matrise og fjerne dem ved å iterere gjennom dem. Denne artikkelen forklarte hvordan du fjerner alle elementer med en spesifikk klasse ved hjelp av JavaScript.