classList.remove() в JavaScript

Метод classList.remove() удаляет CSS-класс DOM-элемента. Остальные классы элемента сохраняются.

• Удаление класса
• Несколько классов
• Если класса нет
• Итого

Удаление класса

<div class="notice is-visible">Настройки сохранены</div>

.notice {
  display: none;
}

.notice.is-visible {
  display: block;
}

const notice = document.querySelector('.notice');

notice.classList.remove('is-visible');

После вызова у элемента останется класс notice, а is-visible будет удалён. Поэтому сработает базовое правило .notice, и элемент скроется. Синтаксис метода: element.classList.remove(‘имя-класса’). Имя класса передают без точки.

notice.classList.remove(‘is-visible’) удаляет только CSS-класс. Вызов notice.remove() удалит сам DOM-элемент.

Несколько классов

За один вызов можно удалить несколько классов. Каждое имя передают отдельным аргументом.

notice.classList.remove('is-visible', 'is-success');

Если класса нет

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

Итого

classList.remove() удаляет один или несколько классов, не затрагивая остальные. Имя класса передают без точки. Если класса нет, вызов метода безопасен.