Supprimer tous les éléments enfants à l'aide de JavaScript

La suppression des éléments enfants d'un élément DOM est une tâche critique pour les développeurs. Parfois, l'utilisateur doit ajouter une fonctionnalité qui supprime toutes les données de la liste insérée. JavaScript facilite les développeurs en fournissant des méthodes prédéfinies pour faire la même chose.

Ce tutoriel expliquera les méthodes pour supprimer tous les éléments enfants d'un élément HTML à l'aide de JavaScript.

Comment supprimer tous les éléments enfants à l'aide de JavaScript?

Pour retirer tous les éléments enfants, utilisez les approches JavaScript suivantes

• Méthode rerovechild ()
• propriété innerhtml

Comprenons le fonctionnement de ces approches individuellement.

Méthode 1: Retirez tous les éléments enfants à l'aide de la méthode RemoveChild ()

Le "removechild ()»La méthode est la méthode JavaScript la plus courante pour supprimer les éléments enfants des éléments DOM. Itérez les éléments DOM avec un moment ou un pour une boucle. À chaque itération, il vérifie pour voir s'il reste un nœud enfant dans l'élément et si oui, il le supprime simplement.

Syntaxe
Suivez la syntaxe mentionnée ci-dessous pour la méthode RemoveChild () pour éliminer les éléments enfants de tout élément HTML:

Removechild (enfant)

Ici, "enfant«Le nœud enfant de l'élément est-il retiré.

Exemple
Tout d'abord, créez une liste non ordonnée dans un fichier HTML à l'aide du HTML

Tag, les éléments de la liste
• sont les éléments enfants de la liste non ordonnée. Ensuite, créez un bouton en attachant un "sur clic”Événement, ce qui déclenchera une fonction pour supprimer les nœuds enfants de l'élément"ul»:
  
  
  
  
  • Pavillon
  
  
  • Html
  
  
  • CSS
  
  
  • Javascrip
  
  
  
  
  Supprimer les éléments enfants de la liste non ordonnée
  

  Pour styliser la liste non ordonnée, le code CSS suivant est utilisé:

  .ul
  Affichage: bloc en ligne;
  Texte-aligne: gauche;
  

  La page HTML ressemblera à:

  Dans le fichier JavaScript, utilisez le code suivant pour supprimer tous les nœuds enfants de l'élément:

  fonction removechildElements ()
  var childeelements = document.queySelector ("ul");
  var delchild = childoyements.dernier enfant;
  while (delchild)
  chantiers.Removechild (Delchild);
  Delchild = enfants.dernier enfant;
  
  

  Dans le code ci-dessus:

  • Tout d'abord, définissez une fonction "removechildElements ()".
  • Obtenez l'élément HTML "ul" en utilisant le "QuerySelector ()" méthode.
  • Itérer l'élément jusqu'au dernier nœud enfant, puis retirez tous en utilisant le «removechild ()" méthode.

  Sortir

  La sortie ci-dessus indique que tous les éléments de la liste sont supprimés avec succès lorsque le bouton est cliqué.

  Pour supprimer, seul le premier nœud enfant de l'élément, utilisez les lignes ci-dessous du code:

  fonction removechildElements ()
  var childeelements = document.queySelector ("ul");
  chantiers.Removechild (ChildElements.premier enfant);
  

  Dans l'extrait de code ci-dessus

  • Obtenez l'élément HTML "ul»Et passez le premier nœud enfant au«removechild ()«Méthode comme argument.

  Sortir

  Le premier élément enfant de la liste non ordonnée est le seul supprimé dans la sortie vue ci-dessus.

  Méthode 2: Retirez tous les éléments enfants à l'aide de la propriété InnerHTML

  Une autre approche pour éliminer tous les nœuds enfants de n'importe quel élément est le «innerhtml" propriété.

  Syntaxe
  La syntaxe suivante est utilisée pour la propriété InnerHTML:

  innerhtml = "

  La chaîne vide est définie sur la propriété InnerHTML qui supprimera tous les nœuds enfants de l'élément.

  Exemple
  Le code donné est utilisé pour supprimer les nœuds enfants à l'aide de la propriété InnerHTML:

  fonction removechildElements ()
  var childeelements = document.queySelector ("ul");
  chantiers.innerHtml = "";
  

  Sortir

  Nous avons rassemblé les meilleures approches possibles pour éliminer les nœuds enfants d'un élément en utilisant JavaScript.

  Conclusion

  Pour éliminer tous les éléments enfants d'un élément DOM, utilisez le «removechild ()«Méthode ou le«innerhtml" propriété. La méthode removechild () est une méthode efficace et couramment utilisée pour éliminer le nœud enfant de l'élément. La propriété innerhtml est la technique la plus simple. Cependant, cela montre que les éléments sont supprimés, mais les nœuds restent à l'intérieur, ralentissant les choses. Ce tutoriel a expliqué les méthodes de suppression de tous les éléments enfants d'un élément HTML via JavaScript.