Supprime tous les éléments d'une certaine classe avec JavaScript

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
ParentNode
RemoveChild

Cependant, vous rencontrerez des problèmes si vous faites une boucle comme cela, car getElementsByClassName renvoie une liste en direct, lorsque vous supprimez un noeud, l'élément est supprimé de la liste, vous ne devez donc pas incrémenter ou vous finirez par ignorer tous les autres éléments. Au lieu de cela, supprimez continuellement le premier élément de la liste, jusqu'à ce qu'il n'y ait pas de premier élément:

 var paras = document.getElementsByClassName('hi'); while(paras[0]) { paras[0].parentNode.removeChild(paras[0]); }​ 

IMO jQuery est génial de vous montrer ce qu'il est possible de faire en Javascript. Je recommande réellement qu'après environ une semaine ou deux de JS ordinaire, vous apprendrez jQuery, faites-vous plaisir et rappelez-vous ce que vous supprimez. Un jour où vous avez une excellente compréhension de la portée Javascript, des objets et autres que vous pouvez obtenir en utilisant jQuery, revenez en arrière et essayez d'apprendre à mieux interagir avec les DOM sans bibliothèque. De cette façon, vous aurez un temps plus facile à apprendre les JS simples et vous apprécierez l'abstraction que les bibliothèques peuvent vous fournir encore plus, tout en apprenant que lorsque vous avez besoin d'une ou deux choses, une bibliothèque vous permettra de les écrire vous-même sans Y compris la bibliothèque entière.

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

Ici, j'utilise Array.prototype.forEach pour parcourir facilement tous les éléments dans un objet en forme de tableau, c'est-à-dire que le NodeList statique est retourné par querySelectorAll , puis en utilisant removeChild() pour supprimer l'objet du DOM.

Pour les navigateurs plus anciens qui ne prennent pas en charge querySelectorAll() ou 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]); } } 

Notez que, car getElementsByTagName renvoie un NodeList en direct , 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 supportent pas querySelectorAll mais supportent getElementsByClassName , que vous pourriez utiliser pour des performances accrues et un code réduit.

Afaik seulement un parent peut enlever un enfant dans JS natif. Donc, vous devez d'abord obtenir cet élément parent, puis utiliser le parent pour supprimer l'élément. Essaye ça:

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