Чтобы удалить класс из нескольких элементов в JavaScript:
- Получите список всех элементов с классом, используя метод
document.querySelectorAll()
. - Перебрать список с помощью метода
forEach()
. - В каждой итерации вызывайте метод
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.
Зарегистрируйтесь и немедленно получите бесплатную копию.