Удалить класс javascript
Иногда возникает ситуация. Что требуется просто убрать, удалить класс, удалить название класса! Не будем называть причины удаления класса – они могут быть разными!
Нам просто нужно удалить класс – давайте сделаем это!
Все способы удалить класс в javascript
- Что такое classList. remove()
- Удалить класс при загрузке страницы
- Как удалить класс при клике по элементу javascript
- Как удалить класс у элемента при клике по другому элементу javascript
- Как удалить несколько классов у элемента при клике по другому элементу javascript
- Скачать можно здесь
Что такое classList. remove
classList. remove() - это свойство (classList) получает все элементы с этим классом, а remove - это метод для удаления, соединяем вместе, получаем удаляем класс javascript!Удалить класс при загрузке страницы
Как удалить класс при загрузке!? Для иллюстрации этого процесса нам понадобится:
<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>
Результат удаления класса при загрузке:
Как удалить класс при клике по элементу 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
<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 удалить класс элемента javascript добавлять удалять классы удалить класс у всех элементов javascript