Fjern alle barneelementer ved hjelp av JavaScript

Å fjerne barneelementer av et DOM -element er en kritisk oppgave for utviklere. Noen ganger er brukeren pålagt å legge til en funksjon som vil fjerne alle dataene fra den innsatte listen. JavaScript gjør det enkelt for utviklere ved å tilby forhåndsdefinerte metoder for å gjøre det samme.

Denne opplæringen vil forklare metodene for å fjerne alle barneelementer i et HTML -element ved hjelp av JavaScript.

Hvordan fjerne alle barneelementer ved hjelp av JavaScript?

For å fjerne alle barneelementer, bruk følgende JavaScript -tilnærminger

• Fjerning () -metoden
• Innerhtml eiendom

La oss forstå arbeidet med disse tilnærmingene individuelt.

Metode 1: Fjern alle barneelementer ved hjelp av RemoveChild () -metoden

“Fjerning ()”Metoden er den vanligste JavaScript -metoden for å fjerne barneelementene i DOM -elementene. Iterere DOM -elementene med en stund eller en for en løkke. På hver iterasjon sjekker den å se om det er noen barneknute igjen i elementet, og i så fall fjerner den ganske enkelt den.

Syntaks
Følg den nedenfor-nevnte syntaks for RemoveChild () -metoden for å fjerne barneelementer i et hvilket som helst HTML-element:

Fjerning (barn)

Her, “barn”Er barneknoden til elementet som skal fjernes.

Eksempel
Lag først en uordnet liste i en HTML -fil ved hjelp av HTML

Tag, listeartiklene
• er barneelementene på den uordnede listen. Opprett deretter en knapp ved å feste en "ved trykk”Hendelsen til det, som vil utløse en funksjon for å fjerne barneknutene til elementet“ul”:
  
  
  
  
  • Oop
  
  
  • Html
  
  
  • CSS
  
  
  • JavaScript
  
  
  
  
  Fjern barneelementer av uordnet liste
  

  For å style den uordnede listen, brukes følgende CSS -kode:

  .ul
  Display: Inline-block;
  Tekstalign: Venstre;
  

  HTML -siden vil se ut:

  I JavaScript -filen bruker du følgende kode for å fjerne alle barneknuter av elementet:

  funksjon fjerneeCildelements ()
  var childelements = dokument.QuerySelector ("UL");
  var delchild = barneelementer.siste barn;
  mens (delchild)
  Barneelementer.Fjerning (Delchild);
  Delchild = barneelementer.siste barn;
  
  

  I koden ovenfor:

  • Først definer en funksjon "Fjerningsildelements ()”.
  • Få HTML -elementet “ul" bruker "QuerySelector ()”Metode.
  • Itererer elementet til den siste barneknuten, og fjern dem alle ved hjelp av “Fjerning ()”Metode.

  Produksjon

  Ovennevnte utdata indikerer at alle elementene i listen blir slettet vellykket når knappen er klikket.

  For å fjerne, bare den første barneknoden til elementet, bruk kodelinjene:

  funksjon fjerneeCildelements ()
  var childelements = dokument.QuerySelector ("UL");
  Barneelementer.Fjerning (barneelementer.første barn);
  

  I ovennevnte kodebit

  • Få HTML -elementet “ul”Og send den første barneknuten til“Fjerning ()”Metode som et argument.

  Produksjon

  Den uordnede listens første barneelement er det eneste som er fjernet i utgangen som er sett over.

  Metode 2: Fjern alle barneelementer ved hjelp av Innerhtml -egenskapen

  En annen tilnærming for å fjerne alle barneknuter av ethvert element er "indrehtml”Eiendom.

  Syntaks
  Følgende syntaks brukes til InnerHTML -egenskapen:

  indrehtml = "

  Den tomme strengen er satt til den innerhtml -egenskapen som vil fjerne alle elementets barneknuter.

  Eksempel
  Den undergitte koden brukes til å fjerne barneknuter ved bruk av InnerHTML-egenskapen:

  funksjon fjerneeCildelements ()
  var childelements = dokument.QuerySelector ("UL");
  Barneelementer.indrehtml = "";
  

  Produksjon

  Vi samlet best mulige tilnærminger for å fjerne et elements barneknuter ved hjelp av JavaScript.

  Konklusjon

  For å fjerne alle barneelementer i et DOM -element, bruk "Fjerning ()”Metode eller“indrehtml”Eiendom. Fjerningsmetoden () er en effektiv og ofte brukt metode for å fjerne elementets barneknute. Innerhtml -egenskapen er den enkleste teknikken. Imidlertid viser det at gjenstandene blir fjernet, men nodene forblir inne og bremser ting ned. Denne opplæringen forklarte metodene for å fjerne alle barneelementer i et HTML -element gjennom JavaScript.