Удалить все элементы определенного класса с помощью JavaScript

HTML:

<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>

JS, что я до сих пор:

var paras = document.getElementsByClassName('hi');

for(var i = 0; i < paras.length; i++) {
    paras[i].style.color = '#ff0011';
    // $('.hi').remove();
}

В jQuery это будет слишком просто. ($('.hi').remove();). Я хочу узнать JS, а затем jQuery.

Я застрял, и Google не предоставил. Я не хочу становиться программистом jQuery для копирования/вставки. Я только начинаю изучать JS. Спасибо.

Ответ 1

Чтобы удалить элемент, вы выполните следующее:

el.parentNode.removeChild(el);

MDN - отличная рекомендация. Вот несколько релевантных страниц:

Node
parentNode
removeChild

Однако вы столкнетесь с проблемами, если вы так зацикливаетесь, поскольку getElementsByClassName возвращает живой список, когда вы удаляете node элемент также удаляется из списка, поэтому вы не должны увеличивать или вы будете пропускать все остальные элементы. Вместо этого просто постоянно удаляйте первый элемент в списке, пока не будет первого элемента:

var paras = document.getElementsByClassName('hi');

while(paras[0]) {
    paras[0].parentNode.removeChild(paras[0]);
}

IMO jQuery отлично показывает вам, что можно сделать в Javascript. Я на самом деле рекомендую, что примерно через неделю или две из простого JS вы изучите jQuery, поработаете над этим и вспомните, что он абстрагирует. В один прекрасный день, когда вы отлично разбираетесь в области Javascript, объектах и т.д., Которые вы можете получить при использовании jQuery, вернитесь назад и попробуйте научиться лучше взаимодействовать с DOM без библиотеки. Таким образом, вам будет проще изучать простой JS, и вы оцените абстракцию, которую библиотеки могут предоставить вам еще больше, изучая, что, когда вам нужны только одна или две вещи, которые предоставляет библиотека, вы можете написать их самостоятельно без включая всю библиотеку.

Ответ 2

[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

Здесь я использую Array.prototype.forEach, чтобы легко пересекать все элементы в подобном массиву объекте, то есть статический NodeList, возвращаемый querySelectorAll, а затем с помощью removeChild() удалить элемент из DOM.

Для старых браузеров, которые не поддерживают querySelectorAll() или forEach():

var classMatcher = /(?:^|\s)hi(?:\s|$)/;
var els = document.getElementsByTagName('*');
for (var i=els.length;i--;){
  if (classMatcher.test(els[i].className)){
    els[i].parentNode.removeChild(els[i]);
  }
}

Обратите внимание, что поскольку getElementsByTagName возвращает live NodeList, вы должны перебирать элементы изнутри назад удаляя их из DOM.

Есть также несколько старых браузеров, которые не поддерживают querySelectorAll, но поддерживают getElementsByClassName, которые можно использовать для повышения производительности и снижения кода.

Ответ 3

Afaik только родительский может удалить ребенка в родной JS. Таким образом, вам сначала нужно будет получить эти элементы parent, а затем использовать родительский элемент для удаления элемента. Попробуйте следующее:

var parent = paras[i].parentNode;
parent.removeChild(paras[i]);

Ответ 4

Простой ответ ES6:

document.querySelectorAll('.classname').forEach(e => e.remove());

Объяснение:

document.querySelectorAll() просматривает элементы в документе, возвращая NodeList всех элементов с указанным селектором (например, '.class', '#id', 'button')
forEach() перебирает NodeList и выполняет указанное действие для каждого элемента
e => e.remove() удаляет элемент из DOM

Однако обратите внимание, что это решение не поддерживается каждым браузером (а именно IE)