Как удалить класс у элемента через JavaScript

Чтобы удалить класс у элемента через JavaScript, найдите элемент и вызовите classList.remove("имя-класса"). Точку перед именем класса внутри remove писать не нужно: точка используется в CSS-селекторе, а не в названии класса

Минимальный пример:

const box = document.querySelector(".box");

box.classList.remove("active");

Если элемент был таким:

<div class="box active">Блок</div>

после выполнения JavaScript останется:

<div class="box">Блок</div>

Полный пример с кнопкой

<div id="card" class="card highlighted">Карточка</div>
<button id="button">Убрать выделение</button>

<script>
  const card = document.querySelector("#card");
  const button = document.querySelector("#button");

  button.addEventListener("click", () => {
    card.classList.remove("highlighted");
  });
</script>

Когда пользователь нажимает кнопку, JavaScript удаляет класс highlighted. CSS-стиль, связанный с этим классом, перестает применяться

CSS для проверки

.card {
  padding: 16px;
  border: 1px solid #ccc;
}

.highlighted {
  background: #fff3a3;
}

Если фон пропал после клика, класс удалился правильно

Почему не нужна точка

Для поиска элемента точка нужна:

document.querySelector(".highlighted");

Для удаления класса точка не нужна:

card.classList.remove("highlighted");

Неправильно:

card.classList.remove(".highlighted");

Такой код пытается удалить класс с именем .highlighted, а не highlighted

Удалить несколько классов

classList.remove умеет принимать несколько классов:

card.classList.remove("highlighted", "large", "visible");

Это удобно, если нужно сбросить состояние элемента

Проверить, есть ли класс

Перед удалением можно проверить:

if (card.classList.contains("highlighted")) {
  card.classList.remove("highlighted");
}

Но чаще проверка не нужна: если класса нет, remove просто ничего не сломает

remove или toggle

Если нужно именно убрать класс, используйте remove:

menu.classList.remove("open");

Если нужно переключать состояние, используйте toggle:

menu.classList.toggle("open");

Для кнопки меню toggle часто удобнее, а для закрытия модального окна надежнее remove

Практический пример: закрыть меню

<nav id="menu" class="menu open">Меню</nav>
<button id="close">Закрыть</button>

<script>
  const menu = document.querySelector("#menu");
  const close = document.querySelector("#close");

  close.addEventListener("click", () => {
    menu.classList.remove("open");
  });
</script>

Такой прием используется в модальных окнах, выпадающих меню, уведомлениях, табах и фильтрах

Удалить класс у всех элементов

Если элементов несколько, используйте querySelectorAll и цикл:

<button class="tab active">Один</button>
<button class="tab active">Два</button>
<button class="tab active">Три</button>

<script>
  const tabs = document.querySelectorAll(".tab");

  for (const tab of tabs) {
    tab.classList.remove("active");
  }
</script>

querySelectorAll возвращает список элементов. У списка нет одного общего classList, поэтому класс нужно удалить у каждого элемента отдельно

Удалить старый класс и добавить новый

Иногда нужно не просто убрать класс, а заменить состояние:

card.classList.remove("error");
card.classList.add("success");

Или одной операцией:

card.classList.replace("error", "success");

replace удобен, когда вы точно знаете старый и новый класс. Если старого класса может не быть, вариант с remove и add часто понятнее для новичка

Частые ошибки

Элемент не найден

const card = document.querySelector("#card");
console.log(card);

Если в Console null, проверьте id, класс и порядок загрузки скрипта

Писать className вместо classList без причины

card.className = "card";

Так можно случайно стереть все остальные классы. classList.remove точнее и безопаснее

Удалять класс до загрузки HTML

Подключайте скрипт с defer:

<script src="script.js" defer></script>

Мини-задание

Создайте блок с классами card active error. По клику на кнопку удалите только error, а card и active оставьте. Затем выведите card.className в Console и проверьте результат

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• Учить Джава Скрипт: это как и с чего начать
• JS скрипт: что это и как написать первый script.js
• Как открыть код элемента в браузере
• Как поймать value элемента в JavaScript