Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

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

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

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

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

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

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

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

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

    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>

  3. Как удалить класс при клике по элементу 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>

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

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

  4. Как удалить класс у элемента при клике по другому элементу 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>

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

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

  5. Как удалить несколько классов у элемента при клике по другому элементу 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


Вас может еще заинтересовать список тем : #JS | #JS_CLASS |
Последняя дата редактирования : 2020-11-28 14:16
Название скрипта :Удалить класс javascript
Скрипт № 51.2Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
удалить класс javascript javascript удалить класс элемента javascript добавлять удалять классы удалить класс у всех элементов javascript

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.