Rimuovi tutti gli elementi figlio usando JavaScript

Rimuovere gli elementi figlio di un elemento DOM è un compito fondamentale per gli sviluppatori. A volte, l'utente è tenuto ad aggiungere una funzione che rimuoverà tutti i dati dall'elenco inserito. JavaScript rende facile per gli sviluppatori fornendo metodi predefiniti per fare la stessa cosa.

Questo tutorial spiegherà i metodi per rimuovere tutti gli elementi figlio di un elemento HTML usando JavaScript.

Come rimuovere tutti gli elementi figlio usando JavaScript?

Per rimuovere tutti gli elementi figlio, utilizzare i seguenti approcci JavaScript

• Metodo RemoveChild ()
• Proprietà InnerHTML

Comprendiamo il funzionamento di questi approcci individualmente.

Metodo 1: rimuovere tutti gli elementi figlio usando il metodo RemoveChild ()

IL "removechild ()"Il metodo è il metodo JavaScript più comune per rimuovere gli elementi figlio degli elementi DOM. Itera gli elementi DOM con un po 'o un percorso. Ad ogni iterazione, controlla se è rimasto un nodo figlio nell'elemento e, in tal caso, lo rimuove semplicemente.

Sintassi
Seguire la sintassi di seguito per il metodo RemoveChild () per rimuovere gli elementi figlio di qualsiasi elemento HTML:

REMOVECHILD (bambino)

Qui, "bambino"È il nodo figlio dell'elemento da rimuovere.

Esempio
Innanzitutto, crea un elenco non ordinato in un file HTML utilizzando HTML

tag, gli elementi dell'elenco
• sono gli elementi infantili della lista non ordinata. Quindi, crea un pulsante attaccando un "al clic"Evento ad esso, che attiverà una funzione per rimuovere i nodi figlio dell'elemento"ul":
  
  
  
  
  • Oop
  
  
  • Html
  
  
  • CSS
  
  
  • JavaScript
  
  
  
  
  Rimuovi gli elementi figlio della lista non ordinata
  

  Per modellare l'elenco non ordinato, viene utilizzato il seguente codice CSS:

  .ul
  display: blocco inline;
  Testo-align: sinistra;
  

  La pagina HTML sembrerà:

  Nel file JavaScript, utilizzare il seguente codice per rimuovere tutti i nodi figlio dell'elemento:

  funzione rimovechildelements ()
  var childelements = document.QuerySelector ("UL");
  var delchild = Childelments.ultimo bambino;
  while (Delchild)
  Childelments.RemoveChild (Delchild);
  Delchild = Childelments.ultimo bambino;
  
  

  Nel codice sopra:

  • Innanzitutto, definire una funzione "RimoveChildElements ()".
  • Ottieni l'elemento HTML "ul" usando il "QuerySelector ()" metodo.
  • Itera l'elemento fino all'ultimo nodo figlio, quindi rimuovi tutti usando "removechild ()" metodo.

  Produzione

  L'output sopra indica che tutti gli elementi nell'elenco vengono eliminati correttamente quando si fa clic sul pulsante.

  Per la rimozione, solo il primo nodo figlio dell'elemento, utilizzare le righe sotto il codice:

  funzione rimovechildelements ()
  var childelements = document.QuerySelector ("UL");
  Childelments.Rimuovi (Childelments.Primogenito);
  

  Nello snippet di codice sopra

  • Ottieni l'elemento HTML "ul"E passa il primo nodo figlio al"removechild ()"Metodo come argomento.

  Produzione

  Il primo elemento figlio dell'elenco non ordinato è l'unico rimosso nell'output visto sopra.

  Metodo 2: rimuovere tutti gli elementi figlio usando la proprietà InnerHTML

  Un altro approccio per la rimozione di tutti i nodi figlio di qualsiasi elemento è il "Innerhtml" proprietà.

  Sintassi
  La seguente sintassi viene utilizzata per la proprietà InnerHTML:

  InnerHtml = "

  La stringa vuota è impostata sulla proprietà InnerHTML che rimuoverà tutti i nodi figlio dell'elemento.

  Esempio
  Il codice di seguito viene utilizzato per la rimozione di nodi figlio usando la proprietà InnerHTML:

  funzione rimovechildelements ()
  var childelements = document.QuerySelector ("UL");
  Childelments.InnerHtml = "";
  

  Produzione

  Abbiamo raccolto i migliori approcci possibili per rimuovere i nodi figlio di un elemento usando JavaScript.

  Conclusione

  Per rimuovere tutti gli elementi figlio di un elemento DOM, utilizzare il “removechild ()Metodo o il "Innerhtml" proprietà. Il metodo REMOVECHILD () è un metodo efficace e comunemente usato per rimuovere il nodo figlio dell'elemento. La proprietà InnerHTML è la tecnica più semplice. Tuttavia, mostra che gli oggetti vengono rimossi, ma i nodi rimangono all'interno, rallentando le cose. Questo tutorial ha spiegato i metodi per rimuovere tutti gli elementi figlio di un elemento HTML tramite JavaScript.