Как удалить CSS класс из элемента с помощью JavaScript

Быстрый ответ

Если нужно скорей всего удалить класс у элемента, команда element.classList.remove("ClassName") в JavaScript будет наиболее подходящим решением:

document.querySelector('.troublemaker').classList.remove('unwantedClass');

Так, элемент <div class="troublemaker unwantedClass"></div> преобразуется в <div class="troublemaker"></div>. Это методика полезная для быстрого изменения стилей.

Работа с множеством классов

Если у элемента несколько классов, и нужно удалить только некоторые из них, classList придёт в уместность:

let diva = document.getElementById('divaElement');
diva.classList.remove('costumeChange', 'offKey');

После применения этого кода, <div id="divaElement" class="costumeChange offKey encore"></div> становится <div id="divaElement" class="encore"></div>.

Учитываем старое и новое

Старые браузеры могут не поддерживать classList. Для IE9 и аналогичных, используйте более примитивный, но надёжный className:

var diva = document.getElementById('divaID');
diva.className = diva.className.replace(/\bmySolo\b/, '');

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

Элегантность программного кода

Для повышения читаемости и добавления изящества кода, можно расширить прототип HTMLElement своим методом удаления классов:

// Делаем код элегантнее
HTMLElement.prototype.removeClass = function(celebrity) {
  var soapOpera = new RegExp('(\\s|^)' + celebrity + '(\\s|$)');
  this.className = this.className.replace(soapOpera, ' ').trim();
};

Теперь, вызвав diva.removeClass('mySolo'), можно легко убрать нежелательный класс.

Визуализация

Представьте, что удаление CSS-класса с HTML-элемента аналогично смене костюма рок-звезды:

Рок-звезда в полном образе (🎸🕶️): <div class="rockstar leatherJacket"></div>

Действие JavaScript: Долгожданная смена образа происходит моментально!

document.querySelector('.rockstar').classList.remove('leatherJacket');

Теперь рок-звезда выглядит так (🎸👔): <div class="rockstar"></div>

Кожаная куртка снята, но рок-дух остаётся!

Поддержка ярых фанатов

В постоянно меняющемся мире важно иметь альтернативные стратегии. Популярность classList не исключает необходимости совместимости:

function fanMeeting(elem, groupie) {
  if (elem.classList) {
    // Даем пищу перфекционистам!
    elem.classList.remove(groupie);
  } else {
    // Берем во внимание пользователей со старыми браузерами
    elem.className = elem.className.replace(new RegExp('(?:^|\\s)' + groupie + '(?:\\s|$)'), ' ').trim();
  }
}

Эта функция надежно решает вопрос удаления классов, идентично во всех браузерах.

Работа со классами в стиле списка

Если использование classList не подходит, а регулярные выражения кажутся сложными, строку className можно преобразовать в массив, а затем фильтровать нежелательный класс:

function stylistChangeover(elem, diva) {
  let castMembers = elem.className.split(' ');
  let supportingCharacters = castMembers.filter(function(character) { return character !== diva; });
  elem.className = supportingCharacters.join(' ');
}

Этот подход позволяет без проблем удалять классы выборочно.

Создаем эксклюзивную атмосферу

Когда всё ненужное удалено, пришло время пригласить на красный ковер с добавлением новых классов:

document.querySelector('.troublemaker').classList.add('wantedClass');

Класс добавлен, ёмкий, а весь текущий состав остался неизменным.

Полезные материалы

1. Element: classList property – Web APIs | MDN — авторитетное руководство по использованию classList API.
2. How To Remove a Class Name — прагматическое руководство по удалению классов при помощи JavaScript.
3. Classes — детальное описание работы с HTML-классами в JavaScript.
4. html – Remove CSS class from element with JavaScript (no jQuery) – Stack Overflow — обширный форум сообщества разработчиков, где обсуждаются различные методы.
5. The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery) — SitePoint — подробное изучение манипуляций с DOM без jQuery, включая classList.
6. How To Modify CSS Classes in JavaScript | DigitalOcean — ознакомительный материал по методам classList в JavaScript.