Come rimuovere elementi che sono stati recuperati usando querySelectorAll?

Question

sembra una cosa che avrebbe una risposta veloce, ma non riesco a trovarne una. Forse sto cercando i termini sbagliati? Nessuna libreria per favore, anche se non ho bisogno di fallback cross-browser, sto prendendo di mira tutte le ultime versioni di questo progetto.

che sto ricevendo alcuni elementi:

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

YEY!

Come eliminare questi elementi? Cosa mi manca? Devo passarci sopra e fare la cosa element.parentNode.removeChild(element); o c'è una semplice funzione che mi manca?

Answer 1

Sì, hai quasi ragione. .querySelectorAll restituisce un congelato NodeList. Hai bisogno di iterarlo e fare le cose.

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

Anche se hai un solo risultato, si avrebbe bisogno di accedervi tramite indice, come

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

---

Se solo si desidera di query per un elemento, utilizzare .querySelector invece . Lì si ottiene il riferimento di nodo senza la necessità di accedere con un indice.

Answer 2

Dal momento che l'NodeList supporta già il forEach si può semplicemente utilizzare

document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));

<div> 
 
    <span class="someselector">1</span> 
 
    <span class="someselector">2</span> 
 
    Should be empty 
 
</div>

Vedere la NodeList.prototype.forEach(). Ricorda che Internet Explorer non è supportato.

Modifica: supporto di Internet Explorer. Se anche voi volete rendere il codice di cui sopra a lavorare in IE, basta aggiungere questo pezzo di codice da nessuna parte prima nei tuoi JS:

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

..e NodeList in IE improvvisamente sostenere forEach pure.