Чтобы удалить класс из нескольких элементов в JavaScript:

  1. Получите список всех элементов с классом, используя метод document.querySelectorAll().
  2. Перебрать список с помощью метода forEach().
  3. В каждой итерации вызывайте метод classList.remove() для удаления класса из каждого элемента.

i.e.:

const elements = document.querySelectorAll('.class');

elements.forEach((element) => {
  element.classList.remove('class');
});

Например:

HTML

<p class="big bold text">Coding</p>
<p class="big bold text">Beauty</p>
<p class="big bold text">Dev</p>

<button id="remove">Remove class</button>

JavaScript

const removeBtn = document.getElementById('remove');

removeBtn.addEventListener('click', () => {
  const elements = document.querySelectorAll('.text');

  elements.forEach((element) => {
    element.classList.remove('big');
  });
});

CSS

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

Это будет HTML после нажатия кнопки:

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<p class="bold text">Dev</p>

<button id="remove">Remove class</button>

Мы используем метод document.querySelectorAll() для выбора всех элементов DOM, у которых есть класс.

Мы перебираем элементы в объекте списка с помощью метода forEach(). Этот forEach() метод работает аналогично Array forEach().

document.getElementsByClassName() метод

Мы можем использовать метод document.getElementsByClassName() вместо метода document.querySelectorAll(), когда селектор является селектором класса. Для getElementsByClassName() мы передаем имя класса без . (точка) и используем Array.from() для преобразования результата в массив перед итерацией с forEach().

const elements = Array.from(document.getElementsByClassName('text'));
elements.forEach((element) => {
  element.classList.remove('big');
});

classList.remove() метод

Мы используем метод classList.remove() для удаления класса из элементов. Вы можете удалить несколько классов, передав больше аргументов в remove().

const elements = document.querySelectorAll('.text');

elements.forEach((element) => {
  element.classList.remove('big', 'bold');
});

Если какой-либо из классов, переданных в remove(), не существует в элементе, remove() проигнорирует его, а не выдаст ошибку.

Удалить класс из элементов с разными селекторами

Иногда нет общего селектора между элементами, из которых вы хотите удалить класс. В таком случае вы можете передать несколько селекторов, разделенных запятыми, в метод querySelectorAll().

const elements = document.querySelectorAll('.text, #box-1, #box-2');

elements.forEach((element) => {
  element.classList.remove('bold');
});

Добавить класс к нескольким элементам

Точно так же, как метод classList.remove() удаляет один или несколько классов из элемента, метод classList.add() добавляет к элементу один или несколько классов. Это означает, что мы можем использовать его в методе forEach() для удаления класса из нескольких элементов DOM:

const elements = document.querySelectorAll('.text');
elements.forEach((element) => {
  element.classList.add('italic', 'underline');
});

Первоначально опубликовано на codingbeautydev.com

Все сумасшедшие вещи, которые делает JavaScript

Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.

Зарегистрируйтесь и немедленно получите бесплатную копию.