Comment supprimer du DOM tous les éléments d'une certaine classe ?

Question

var paras = document.getElementsByClassName('hi');

for (var i = 0; i < paras.length; i++) {
  paras[i].style.color = '#ff0011';
  // $('.hi').remove();
}

<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>

Avec jQuery, ce serait très facile : $('.hi').remove(); . Je veux apprendre JS, puis jQuery.

Je suis bloqué et Google ne m'a rien fourni. Je ne veux pas devenir un programmeur jQuery copier/coller. Je commence tout juste à apprendre JS. Je vous remercie.

Answer 1

Pour supprimer un élément, procédez comme suit :

el.parentNode.removeChild(el);

MDN est une excellente référence. Voici quelques pages pertinentes :

Nœud
nœud parent
removeChild

Cependant, vous rencontrerez des problèmes si vous faites des boucles de ce type, car getElementsByClassName renvoie une liste vivante, lorsque vous supprimez un nœud, l'élément est également supprimé de la liste, vous ne devez donc pas incrémenter ou vous finirez par sauter un élément sur deux. Au lieu de cela, il suffit de supprimer continuellement le premier élément de la liste, jusqu'à ce qu'il n'y ait plus de premier élément :

var paras = document.getElementsByClassName('hi');

while(paras[0]) {
    paras[0].parentNode.removeChild(paras[0]);
}​

---

IMO jQuery est un excellent moyen de montrer ce qu'il est possible de faire en Javascript. En fait, je recommande qu'après une semaine ou deux de JS simple, vous appreniez jQuery, que vous le maîtrisiez bien et que vous vous souveniez de ce qu'il permet d'abstraire. Un jour, lorsque vous aurez une excellente compréhension du scoping Javascript, des objets, etc. que vous pouvez obtenir en utilisant jQuery, revenez en arrière et essayez d'apprendre comment mieux interagir avec le DOM sans bibliothèque. De cette façon, vous aurez plus de facilité à apprendre le JS simple et vous apprécierez encore plus l'abstraction que les bibliothèques peuvent vous fournir, tout en apprenant que lorsque vous n'avez besoin que d'une ou deux choses qu'une bibliothèque fournit, vous pouvez être en mesure de les écrire vous-même sans inclure la bibliothèque entière.

Answer 2

Réponse simple ES6 :

document.querySelectorAll('.classname').forEach(e => e.remove());

Explication :

1. document.querySelectorAll() parcourt en boucle les éléments du document et renvoie un fichier Liste de nœuds de tous les éléments avec le sélecteur spécifié (par ex. '.class' , '#id' , 'button' )
2. forEach() parcourt en boucle la liste des nœuds et exécute l'action spécifiée pour chaque élément
3. e => e.remove() supprime l'élément du DOM

Il convient toutefois de noter que cette solution n'est pas supportée par Internet Explorer . Mais encore une fois, rien ne l'est.

Answer 3

[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

_J'utilise ici Array.prototype.forEach pour parcourir facilement tous les éléments d'un objet de type tableau, c'est-à-dire la NodeList statique renvoyée par querySelectorAll et en utilisant ensuite removeChild() pour supprimer l'élément du DOM._

Pour les anciens navigateurs qui ne prennent pas en charge querySelectorAll() o forEach() :

var classMatcher = /(?:^|\s)hi(?:\s|$)/;
var els = document.getElementsByTagName('*');
for (var i=els.length;i--;){
  if (classMatcher.test(els[i].className)){
    els[i].parentNode.removeChild(els[i]);
  }
}

Il convient de noter que, dans la mesure où getElementsByTagName renvoie un vivre NodeList, vous devez itérer sur les éléments de l'arrière vers l'avant tout en les retirant du DOM.

Certains navigateurs plus anciens ne prennent pas en charge la fonction querySelectorAll mais qui soutiennent getElementsByClassName que vous pouvez utiliser pour améliorer les performances et réduire le code.

Answer 4

Il semble que seul un parent puisse supprimer un enfant dans le langage JS natif. Vous devez donc d'abord obtenir le parent de l'élément, puis utiliser le parent pour supprimer l'élément. Essayez ceci :

var parent = paras[i].parentNode;
parent.removeChild(paras[i]);