ClassList. remove()

"classList. remove()". Что такое "classList. remove()". Как использовать. Примеры classList. remove().

Подробно о classList. remove() в javascript

1. Что такое classList.remove()
2. Использовать classList. remove() к одному классу
Живой стенд работы classList.remove()

3. Использовать classList. remove() к нескольким классам
Живой стенд работы classList.remove() к нескольким классам

Что такое classList. remove()

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

Синтаксис classList. remove()

элемент.classList. removeкласс

Расшифровка синтаксиса classList. remove()

Для того, чтобы было понятно, что внутри синтаксиса classList. remove() - разберем его на составляющие:

элемент - элемент js

classList - в разных источниках вы найдете разную трактовку, я скорее склоняюсь к том, что это "свойство объекта Element"

remove - удаление.

класс - класс




Использовать classList. remove() к одному классу

Для того, чтобы использовать classList. remove() к одному классу. Разберем работу "classList. remove()" на примере, для этого вам понадобится:

Вам потребуется какой-то тег, пусть это будет div добавляем ему class + id, чтобы обратиться к тегу

<div class="class_element_2" id="id_element_2">Здесь содержание блока</div>

Чтобы пример был живой, вам потребуется button

<button id="id_button">Используй classList. remove() к одному классу</button>

Собираем javascript код, чтобы увидеть работу classList. remove() вживую:

Используем onclick по нашей кнопке "id_button".

И далее применяем classList. remove() к нашему классу

classList . remove("class_element_2")

Весь код:

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

Весь код в сборе classList. remove() к одному классу

Css:

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

Html:

<div class="class_element_2" id="id_element_2">Здесь содержание блока</div>

<button class="button" id="id_button">Используй classList. remove() к одному классу</button>

Javascript:

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

Пример использования classList. remove() к одному классу

Поместим ранее собранный код прямо здесь. Вы сможете проверить работу кода, где используется "classList. remove() к одному классу"

Здесь содержание блока
Используй classList. remove() к одному классу

Далее... соберем стенд для иллюстрации работы classList. remove()!

Живой стенд работы classList.remove()

Как работает выше приведенный код?

Для того, чтобы увидеть вживую работу "classList.remove()" создам стенд

<div id="example" class="example_1 example_2"></div>
Пример работы "classList.add()"



Использовать classList. remove() к нескольким классам

Не буду рассказывать заново предыдущий пункт, поскольку эта тема практически аналогична, с некоторой разницей...

отличается количество классов в div

<div class="class_element_3 class_element_4 class_element_5" id="id_element_3">Здесь контент</div>

И применение classList. remove() к нескольким классам, в скрипте после "remove" перечисляем все классы, к которыйм хотим применить "classList. remove()"

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

Стили классов:

Создадим несколько классов, один из классов - текст будет красного цвета: ".class_element_3{color:red;}"

class_element_3

[kod]

Второй класс будет отличаться размером шрифта от основного текста страницы ".class_element_4{font-size: 20px;}"

class_element_4

[kod]

Ну и добавим третий класс - пусть это будет бордюр фиолетового цвета - ".class_element_5{border: 1px solid #bd00ff;}"

class_element_5

[kod]

Весь код использования classList. remove() к нескольким классам

Html:

<div class="class_element_3 class_element_4 class_element_5" id="id_element_3">Здесь контент</div>

Css

<style>

.class_element_3{color:red;}

.class_element_4{font-size: 20px;}

.class_element_5{border: 1px solid #bd00ff;}

</style>

Javascript:

<script>

id_button_1 . onclick = function( ) {

id_element_3 . classList . remove ("class_element_3" , "class_element_4" , "class_element_5");

}

</script>

Пример использования classList. remove() к нескольким классам

И далее нам остается только и всего-то... разместить выше приведенный код прямо здесь!

Здесь контент
[kod] Используй classList. remove() к нескольким классам

Живой стенд работы classList.remove() к нескольким классам

<div id="example" class="class_element_3 class_element_4 class_element_5"></div>
Пример работы "classList.add()"