Иногда мы хотим удалить элементы HTML по имени класса в нашем коде JavaScript.

В этой статье мы рассмотрим, как удалять элементы по имени класса.

Получите родительский узел элемента и вызовите на нем removeChild

Мы можем получить родительский узел элемента и вызвать removeChild для каждого элемента, чтобы удалить элемент.

Например, если у нас есть следующий HTML:

<div>
  <p class='text'>
    foo
  </p>
  <p class='text'>
    bar
  </p>
  <p class='text'>
    baz
  </p>
</div>

Тогда мы можем написать:

const text = document.querySelectorAll('.text')
for (const el of text) {
  el.parentNode.removeChild(el);
}

для выбора всех элементов с классом text.

Затем мы используем цикл for-of для перебора каждого элемента.

В теле цикла мы получаем родительский узел элемента со свойством parentNode.

Затем мы вызываем removeChild с элементом el, чтобы удалить его.

Вызов метода удаления

У объектов Element также есть метод remove, позволяющий нам удалить элемент.

Например, если у нас есть следующий HTML:

<div>
  <p class='text'>
    foo
  </p>
  <p class='text'>
    bar
  </p>
  <p class='text'>
    baz
  </p>
</div>

Тогда мы можем написать:

const text = document.querySelectorAll('.text')
for (const el of text) {
  el.remove();
}

для удаления каждого элемента, выбранного с помощью метода remove.

Заключение

Мы можем выбрать все элементы с заданным классом, а затем удалить их один за другим в цикле for-of.

Каждый элемент можно удалить с помощью метода remove или removeChild.

Больше контента на plainenglish.io