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

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

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

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

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

Все способы удалить класс в 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-01-24 03:40
Название скрипта :Удалить класс javascript
Скрипт № 50.2Ссылка на скачивение: Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
Марат :
02/09/2020 03:25
Рад, что помог! Приходите еще!
подробнее.
Алексей :
02/09/2020 01:16
Спасибо Кое-что пригодилось!
подробнее.
Павел :
26/08/2020 05:57
textarea В таблице, а таблица в родительском div, а этот див является частью аккордеона, сам textarea без displey: none, но…
подробнее.
Марат :
26/08/2020 04:22
Столько написали и ничего не понятно!У вас есть textarea со свойством "display: none;" - непонятно... зачем textarea скрытый и…
подробнее.
Павел :
26/08/2020 08:02
Здравствуйте. Пишу плагин для таблицы, в таблице много textarea, плагин и таблица расположены в скрытой вкладке…
подробнее.