Wie entferne ich Elemente, die mit querySelectorAll abgerufen wurden?

Das scheint etwas zu sein, das eine schnelle Antwort hätte, aber ich kann keine finden. Vielleicht suche ich nach den falschen Begriffen? Bitte keine Bibliotheken, obwohl ich keine Cross-Browser-Fallbacks benötige, ziele ich auf alle neuesten Versionen dieses Projekts ab.

Ich bekomme einige Elemente:

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

Das funktioniert, aber wie lösche ich diese Elemente jetzt? Muss ich sie durchschleifen und das tun element.parentNode.removeChild(element); Sache, oder gibt es eine einfache Funktion, die ich vermisse?

Ja, du hast fast recht. .querySelectorAll gibt a zurück eingefrorene NodeList. Sie müssen es wiederholen und Dinge tun.

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

Selbst wenn Sie nur ein Ergebnis erhalten, müssten Sie über den Index darauf zugreifen, z

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

Wenn Sie nur wollen um nach einem Element abzufragen, verwenden Sie .querySelector stattdessen. Da bekommt man einfach die Knotenreferenz ohne dass mit einem Index darauf zugegriffen werden muss.

Seit der NodeList unterstützt bereits die forEach Sie können einfach verwenden:

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

<div>
  <span class="someselector">element 1</span>
  <span class="someselector">element 2</span>
  there shouldn't be any of the above "element" spans after you run the code
</div>

Siehe die NodeList.prototype.forEach() und Element.remove()

Internet Explorer-Unterstützung. IE unterstützt das nicht forEach auf der NodeList und IE unterstützt auch nicht remove Methode an Element Objekte. Wenn Sie also den obigen Code auch im IE ausführen möchten, fügen Sie einfach die folgenden Zeilen am Anfang Ihres JavaScript-Codes hinzu und verwenden Sie zum Entfernen eines Elements die Node.removeChild anstelle vonIch benutze die Element.remove() Polyfill):

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}
// ..then continue as usual with the forEach
document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));

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

Noch prägnanter mit Array.von und ChildNode.remove:

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

Ok, ich habe gerade gesehen, dass NodeList iterierbar ist, sodass es noch kürzer gemacht werden kann:

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