Jak usunąć elementy, które zostały pobrane przy użyciu kwerendy querySelector?

Question

jego wydaje się czymś, co będzie miało szybką odpowiedź, ale nie mogę znaleźć. Może szukam złych terminów? Żadnych bibliotek, proszę, choć nie potrzebuję działań zastępczych w różnych przeglądarkach, wybieram wszystkie najnowsze wersje tego projektu.

Dostaję kilka elementów:

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

Yey!

Jak usunąć te elementy? czego mi brakuje? Czy muszę przechodzić między nimi i wykonywać operacje element.parentNode.removeChild(element);, czy istnieje prosta funkcja, której mi brakuje?

Answer 1

Tak, masz prawie rację. .querySelectorAll zwraca zamrożoną wartość NodeList. Musisz go iterować i robić różne rzeczy.

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

Nawet jeśli dostał tylko jeden wynik, trzeba by do niego dostęp za pośrednictwem indeksu, jak

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

---

Jeśli tylko chcą kwerendy dla jednego elementu, należy .querySelector zamiast . Dostajesz wtedy odniesienie do węzła bez potrzeby dostępu z indeksem.

Answer 2

Od NodeList już obsługuje forEach można po prostu użyć

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

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

Zobacz NodeList.prototype.forEach(). Pamiętaj, że Internet Explorer nie jest obsługiwany.

Edytuj: Obsługa Internet Explorera. Jeśli też chcesz, aby powyższy kod pracuje w IE, wystarczy dodać ten kawałek kodu nigdzie wcześniej w swoim JS:

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

..i NodeList w IE nagle wspierać forEach również.