web-dev-qa-db-fra.com

Comment supprimer les éléments récupérés à l'aide de querySelectorAll?

Cela semble être quelque chose qui aurait une réponse rapide, mais je n'en trouve pas. Peut-être que je cherche les mauvais termes? Pas de bibliothèques s'il vous plaît, bien que je n'aie pas besoin de solutions de secours inter-navigateurs, je cible toutes les dernières versions de ce projet.

Je reçois des éléments:

element = document.querySelectorAll(".someselector");

Cela fonctionne, mais comment supprimer maintenant ces éléments? Dois-je les parcourir et faire la chose element.parentNode.removeChild(element);, ou y a-t-il une fonction simple qui me manque?

javascriptelementselectors-api
43
Randy Hall

Oui, tu as presque raison. .querySelectorAll renvoie un NodeList figé. Vous devez le répéter et faire des choses.

Array.prototype.forEach.call( element, function( node ) {
    node.parentNode.removeChild( node );
});

Même si vous n'obtenez qu'un seul résultat, vous devrez y accéder via un index, comme

elements[0].parentNode.removeChild(elements[0]);

Si vous seulement voulez pour rechercher un élément, utilisez .querySelector au lieu. Là, vous obtenez juste le référence de nœud sans avoir besoin d'accéder avec un index.

52
jAndy

Puisque le NodeList prend déjà en charge le forEach, vous pouvez simplement utiliser

document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));
<div>
  <span class="someselector">1</span>
  <span class="someselector">2</span>
  Should be empty
</div>

Voir NodeList.prototype.forEach () .

Prise en charge d'Internet Explorer . IE ne prend pas en charge forEach sur NodeList donc si vous souhaitez également faire fonctionner le code ci-dessus dans IE, ajoutez simplement ce morceau de code au début de votre code JavaScript:

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

..et NodeList in IE supportera soudainement forEach également.

23
Ivan Sivak

Encore plus concis avec Array.from et ChildNode.remove :

Array.from(document.querySelectorAll('.someselector')).forEach(el => el.remove());

Ok, je viens de voir que NodeList est itérable donc cela peut être fait encore plus court:

document.querySelectorAll('.someselector').forEach(el => el.remove());
5
Simon