jQuery a une fonction destinée uniquement à supprimer les éléments enfants de l’intérieur d’un autre élément. La méthode “empty()” peut être utilisée directement sur l’objet.
Considérez le code HTML ci-dessous.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor sit amet</title>
5</head>
6<body>
7 <div id="myDiv">
8 <p>First paragraph</p>
9 <p>Second paragraph</p>
10 <p>Third paragraph</p>
11 <p>Fourth paragraph</p>
12 </div>
13 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
14</body>
15</html>
Pour supprimer tous les paragraphes à l’intérieur de l’élément “myDiv”, utilisez simplement le code suivant dans jQuery.
1$("#myDiv").empty();
Mais comment pouvons-nous effectuer cette même opération en utilisant uniquement JavaScript ?
Suppression d’éléments enfants d’un nœud DOM à l’aide de JavaScript
JavaScript permet au programmeur de supprimer des éléments d’un nœud DOM via diverses propriétés. Apprenons à faire cette suppression en utilisant chacun d’eux.
innerHTML
L’une de ces propriétés est “innerHTML”. Il permet de remplacer tout le HTML interne de l’élément. Y compris à remplacer par une chaîne vide, rendant l’élément en question vide.
Pour supprimer tous les nœuds enfants à l’intérieur de l’élément “myDiv”, utilisez le code JavaScript suivant.
1document.getElementById("myDiv").innerHTML = "";
Ci-dessous vous pouvez voir un exemple complet en HTML. Ici, nous utilisons un bouton pour supprimer des éléments.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Removing HTML elements using innerHTML</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv" style="border: 3px dashed red; margin-bottom: 20px;">
9 <p>First paragraph</p>
10 <p>Second paragraph</p>
11 <p>Third paragraph</p>
12 <p>Fourth paragraph</p>
13 </div>
14
15 <button id='removeElements'>Remove paragraphs (innerHTML)</button>
16
17 <script>
18 const button = document.getElementById("removeElements");
19 button.onclick = function () {
20 document.getElementById("myDiv").innerHTML = "";
21 };
22 </script>
23</body>
24</html>
textContent
La propriété “textContent” peut être utilisée pour remplacer tous les éléments à l’intérieur d’un nœud par une chaîne vide.
Selon le navigateur, l’utilisation de “textContent” peut être plus performante que “innerHTML”.
1document.getElementById("myDiv").textContent = "";
Supprimer les éléments enfants à l’aide d’une boucle (“lastChild”)
Dans l’exemple ci-dessous, nous utilisons la boucle “while” pour vérifier si notre élément contient le premier enfant. Si vrai, cela indique qu’il y a au moins un élément enfant à l’intérieur de l’élément parent, donc la boucle supprime le dernier élément. Et le processus se répète.
La suppression du dernier élément à l’aide de la propriété “lastChild” est généralement plus efficace que la suppression du premier élément à l’aide de la propriété “firstChild”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Supprimer les éléments enfants à l’aide d’une boucle (“lastElementChild”)
Ici, nous obtiendrons le même résultat, mais en préservant les “non-éléments” tels que les nœuds de texte “#text” et les commentaires “<!– comments –>”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Une autre caractéristique de “lastElementChild” est de préserver les nœuds enfants au sein de l’élément parent qui ne sont pas des descendants directs.
Par exemple, considérons la structure des éléments ci-dessous.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
Lors de l’utilisation de “lastElementChild”, le “First node” et le “Second node” seraient supprimés. “Node 1” et “Node 2” ne seraient pas supprimés.
Supprimer les éléments enfants avec la méthode “remove”
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
La fonction “remove” a été ajoutée dans ES5. Il a une syntaxe de chaînage plus simple et plus directe. Il a déjà un excellent support dans de nombreux navigateurs .
Supprimer des éléments avec la méthode “replaceChildren”
Il est également possible de supprimer des éléments enfants d’un nœud DOM à l’aide de l’API “replaceChildren”. Cette méthode vous permet non seulement de supprimer des éléments d’un élément parent, mais également de les remplacer par d’autres éléments en une seule opération.
Pour supprimer uniquement les éléments enfants, appelez l’API sans aucun argument.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
L’API “replaceChildren” est déjà bien prise en charge par les navigateurs modernes .