Удалить класс javascript

Поддержи проект!!!

Иногда возникает ситуация. Что требуется просто убрать, удалить класс, удалить название класса! Не будем называть причины удаления класса – они могут быть разными!

Нам просто нужно удалить класс – давайте сделаем это!

Все способы удалить класс в javascript

1. Что такое classList. remove()
2. Удалить класс при загрузке страницы
3. Как удалить класс при клике по элементу javascript
4. Как удалить класс у элемента при клике по другому элементу javascript
5. Как удалить несколько классов у элемента при клике по другому элементу javascript
6. Скачать можно здесь

Что такое classList. remove

classList. remove() - это свойство (classList) получает все элементы с этим классом, а remove - это метод для удаления, соединяем вместе, получаем удаляем класс javascript!


Удалить класс при загрузке страницы

Как удалить класс при загрузке!? Для иллюстрации этого процесса нам понадобится:

1). Элемент(div), с классом -> class= class_element, и с id = id_element

<div class="class_element" id="id_element">Удалить класс при загрузке страницы</div>
2). Покрасим текст в красный цвет:

<style>.class_element{color:red;}</style>
3). И последнее - это скрипт, который выполнится при загрузке и удалит класс у нашего элемента...


<script>id_element. classList. remove("class_element"); </script>

Весь код в сборе:

<div class="class_element" id="id_element">Удалить класс при загрузке страницы</div>

<style>.class_element{color:red;}</style>

<script>id_element. classList. remove("class_element"); </script>

Результат удаления класса при загрузке:

Удалить класс при загрузке страницы
Вижу ваше удивление!? А где же результат!? Откройте исследовать элемент и вы увидите такой результат:

<div class="" id="id_element">Удалить класс при загрузке страницы</div>

Как удалить класс при клике по элементу javascript

Возьмем код из выше приведенного и добавим ему onclick и ан него повесим функцию, которая и будет удалять класс у нашего элемента.

Код в сборе:

<div class="class_element_1" id="id_element_1">Удалить класс при клике на элемент </div>

<style>.class_element_1{color:red;}</style>

<script>id_element_1. onclick = function( ) { id_element_1. classList . remove("class_element_1");}</script>

Результат удаления класс у элемента, после нажатия на него - нажмите по строке красного цвета:

Удалить класс при клике на элемент

Как удалить класс у элемента при клике по другому элементу javascript

Далее будем удалять класс в javascript по клику по кнопке ? опять берем верхний код и клик вешаем на ид кнопки:

<style>.class_element_2{color:red;}</style>

<button class="button" id="id_button">Удали класс - нажми на меня!</button>

<script>id_button . onclick = function( ) { id_element_2 . classList . remove("class_element_2");}</script>

Результат удаления класса у элемента по клику на другой элемент

Удалить класс при клике на элемент
Удали класс - нажми на меня!

Как удалить несколько классов у элемента при клике по другому элементу javascript

1). Нам нужно добавить несколько классов к нашему элементу, путь это будет три класса:

<div class="class_element_3 class_element_4 class_element_5" id="id_element_3">Удалить несколько классов при клике javascript</div>
2). Добавим три класса,в стили - в первом цвет, во втором размер шрифта. в третьем бордюр :

<style>.class_element_3{color:red;} .class_element_4{font-size: 20px;} .class_element_5{border: 1px solid;}</style>
3).
<button class="button" id="id_button_1">Удали сразу несколько классов javascript!</button>
4). И далее нам нужен скрипт, который удалит сразу несколько классов у элемента по одному клику по кнопке! В remove прописываем через запятую столько классов, сколько вам нужно удалить!


<script>id_button_1 . onclick = function( ) { id_element_3 . classList . remove("class_element_3","class_element_4","class_element_5");}</script>

Код в сборе для удаления сразу нескольких классов по клику:

<div class="class_element_3 class_element_4 class_element_5" id="id_element_3">Удалить несколько классов при клике javascript</div>

<style>.class_element_3{color:red;} .class_element_4{font-size: 20px;} .class_element_5{border: 1px solid;}</style>

<button class="button" id="id_button_1">Удали сразу несколько классов javascript!</button>

<script>id_button_1 . onclick = function( ) { id_element_3 . classList . remove("class_element_3","class_element_4","class_element_5");}</script>

Результат:

Удалить несколько классов при клике javascript
Удали сразу несколько классов javascript