Как удалить элементы, которые были выбраны с помощью querySelectorAll?

Это похоже на быстрый ответ, но я не могу его найти. Может быть, я ищу неправильные термины? Никаких библиотек, пожалуйста, хотя я не нуждаюсь в кросс-браузерных запасных версиях, я ориентируюсь на все последние версии этого проекта.

Я получаю некоторые элементы:

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

Это работает, но как мне теперь удалить эти элементы? Должен ли я пройти через них и сделать element.parentNode.removeChild(element); вещь, или мне не хватает простой функции?

Ответы

Ответ 1

Да, ты почти прав. .querySelectorAll возвращает замороженный NodeList. Вам нужно выполнить итерацию и сделать что-то.

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

Даже если у вас есть только один результат, вам нужно будет получить доступ к нему через индекс, например

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

Если вы хотите запросить только один элемент, используйте .querySelector. Там вы просто получите ссылку node без необходимости доступа с индексом.

Ответ 2

Поскольку NodeList уже поддерживает forEach вы можете просто использовать

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

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

Ответ 3

Еще более лаконично с Array.from и ChildNode.remove:

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

Хорошо, только что увидел, что NodeList итеративен, поэтому его можно сделать еще короче:

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