Как удалить класс в js

Метод remove объекта classList

Метод remove объекта classList удаляет заданный CSS класс элемента.

Синтаксис

элемент.classList.remove(класс);

Пример

Удалим класс ggg :

let elem = document.querySelector(‘#elem’); elem.classList.remove(‘ggg’);

Результат выполнения кода:

Смотрите также

• метод classList.add ,
  который добавляет заданный класс
• метод classList.contains ,
  который проверяет заданный класс
• метод classList.toggle ,
  который чередует заданный класс

Как удалить класс у элемента в Javascript

В одной из предыдущих статей мы рассмотрели как добавить класс у элемента в Javascript.

Подобным образом, используя свойство classList и метод remove .

var el = document.querySelector(".element"); el.classList.remove("active");

Можно удалить сразу несколько классов, указав их через запятую:

var el = document.querySelector(".element"); el.classList.remove("active", "mobile");

Поддержка браузеров аналогичная методу add – IE10 и выше.

Убираем класс с помощью classList.remove

Мы убедились, что JavaScript действительно нашёл элемент с классом page . Пора заняться переключением тем. У найденного элемента есть ещё второй класс — light-theme , благодаря ему на странице включена светлая тема. Чтобы не было смешения стилей, когда мы переключим тему, этот класс у элемента нужно убрать. Для этого нам понадобится метод classList.remove . Используют его так:

элемент.classList.remove('класс');

Метод убирает с элемента тот класс, который указан в скобках. Обратите внимание, что мы не ставим точку перед именем класса в classList.remove . Это не селектор, JavaScript и так знает, что мы имеем дело с классом.

Обратите внимание, что буква «L» в названии метода заглавная. JavaScript чувствителен к регистру. Если написать classlist.remove , метод не сработает.

Чтобы выключить светлую тему, убрав класс light-theme у элемента page , используем инструкцию:

document.querySelector('.page').classList.remove('light-theme');

Получился такой «паровозик»: найди элемент, а потом убери у него класс. Давайте посмотрим, что произойдёт, когда эта инструкция выполнится:

Давайте выключим светлую тему с помощью JavaScript!

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 4 970 ₽ в месяц.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим
• script.js Сплит-режим