Usuń wszystkie elementy dziecięce za pomocą JavaScript

Usunięcie elementów dziecka elementu DOM jest kluczowym zadaniem dla programistów. Czasami użytkownik jest zobowiązany do dodania funkcji, która usunie wszystkie dane z listy wstawionej. JavaScript ułatwia programistom, dostarczając predefiniowane metody robienia tego samego.

Ten samouczek wyjaśni metody usuwania wszystkich elementów dziecięcych elementu HTML za pomocą JavaScript.

Jak usunąć wszystkie elementy dziecięce za pomocą JavaScript?

Aby usunąć wszystkie elementy dziecięce, zastosuj następujące podejścia JavaScript

• Metoda revuchechild ()
• Własność InnerHtml

Zrozumiemy indywidualnie działanie tych podejść.

Metoda 1: Usuń wszystkie elementy dziecięce za pomocą metody resveechild ()

„„revunchild ()”Metoda jest najczęstszą metodą JavaScript do usuwania elementów dziecięcych elementów DOM. Iteruj elementy DOM z chwilą lub A dla pętli. Na każdej iteracji sprawdza, czy w elemencie pozostaje jakikolwiek węzeł dziecięcy, a jeśli tak, po prostu go usuwa.

Składnia
Postępuj zgodnie z poniżej wymienioną składnią do metody usuwania elementów dziecięcych dowolnego elementu HTML:

resecyeChild (dziecko)

Tutaj, "dziecko”Jest węzłem dziecięcym elementu do usunięcia.

Przykład
Najpierw utwórz listę nieopisaną w pliku HTML za pomocą HTML

tag, pozycje listy
• to elementy dziecięce z listy nieopisanej. Następnie utwórz przycisk, dołączając „na kliknięcie„Zdarzenie do niego, które uruchomi funkcję usuwania węzłów dziecięcych elementu”ul”:
  
  
  
  
  • Oop
  
  
  • Html
  
  
  • CSS
  
  
  • JavaScript
  
  
  
  
  Usuń elementy dziecięce z listy nieuporządkowanej
  

  Aby stylizować listę nieopisaną, używany jest następujący kod CSS:

  .ul
  Wyświetlacz: Block Inline;
  Text-Align: lewy;
  

  Strona HTML będzie wyglądać:

  W pliku JavaScript użyj następującego kodu do usunięcia wszystkich węzłów dziecięcych elementu:

  Funkcja resecomildelements ()
  var childelements = dokument.QuerySelelect („UL”);
  var delchild = chilleterements.ostatnie dziecko;
  while (delchild)
  dziecięce.resuseChild (Delchild);
  Delchild = ChildElements.ostatnie dziecko;
  
  

  W powyższym kodzie:

  • Najpierw zdefiniuj funkcję „revunchildElements ()".
  • Zdobądź element HTML "ul" używając "QuerySelelect ()" metoda.
  • Iteruj element do ostatniego węzła dziecięcego, a następnie usuń je wszystkie za pomocą „revunchild ()" metoda.

  Wyjście

  Powyższe wyjście wskazuje, że wszystkie elementy na liście są pomyślnie usuwane po kliknięciu przycisku.

  Do usunięcia, tylko pierwszy dziecięcy węzeł elementu, użyj poniższych wierszy kodu:

  Funkcja resecomildelements ()
  var childelements = dokument.QuerySelelect („UL”);
  dziecięce.resuseChild (Chilleteress.pierworodny);
  

  W powyższym fragmencie kodu

  • Zdobądź element HTML "ul”I przekazuj pierwszy węzeł dziecięcy do„revunchild ()„Metoda jako argument.

  Wyjście

  Pierwszym elementem dziecięcym listy nie uporządkowanej jest jedynym usuniętym na wyjściu widocznym powyżej.

  Metoda 2: Usuń wszystkie elementy dziecięce za pomocą właściwości InnerHTML

  Innym podejściem do usunięcia wszystkich węzłów dziecięcych dowolnego elementu jest „InnerHtml" nieruchomość.

  Składnia
  Poniższa składnia jest używana dla właściwości InnerHTML:

  innerHtml = "

  Pusty ciąg jest ustawiony na właściwość InnerHTML, która usunie wszystkie węzły dziecięce elementu.

  Przykład
  Kod pod względem podanym służy do usuwania węzłów dziecięcych za pomocą właściwości InnerHTML:

  Funkcja resecomildelements ()
  var childelements = dokument.QuerySelelect („UL”);
  dziecięce.innerhtml = "";
  

  Wyjście

  Zebraliśmy najlepsze możliwe podejścia do usunięcia węzłów dziecięcych elementu za pomocą JavaScript.

  Wniosek

  Aby usunąć wszystkie elementy dziecięce elementu DOM, użyj „revunchild ()”Metoda lub„InnerHtml" nieruchomość. Metoda resecomild () jest skuteczną i powszechnie stosowaną metodą usuwania węzła dziecięcego elementu. Własność InnerHTML jest najprostszą techniką. Pokazuje jednak, że elementy są usuwane, ale węzły pozostają w środku, spowalniając rzeczy. Ten samouczek wyjaśnił metody usuwania wszystkich elementów dziecięcych elementu HTML przez JavaScript.