.removeClass()

Удалить один класс, несколько классов или все классы из каждого элемента в наборе совпавших элементов.

Содержание:

.removeClass( className )
.removeClass()
- .removeClass()

.removeClass( className )Возвращает: jQuery

Описание: Удалить один или несколько классов из каждого элемента в наборе совпавших элементов.

версия добавлена: 1.0.removeClass( className )
- className
  
  Тип: Строка
  
  Один или несколько классов, разделенных пробелами, которые должны быть удалены из атрибута класса каждого совпавшего элемента.
версия добавлена: 3.3.removeClass( classNames )
- classNames
  
  Тип: Массив
  
  Массив классов, которые должны быть удалены из атрибута класса каждого совпавшего элемента.
версия добавлена: 1.4.removeClass( function )
- function
  
  Тип: Функция( Целое число индекс, Строка className ) => Строка
  
  Функция, возвращающая один или несколько классов, разделенных пробелами, которые должны быть удалены. Принимает в качестве аргументов позицию индекса элемента в наборе и старое значение класса.
версия добавлена: 3.3.removeClass( function )
- function
  
  Тип: Функция( Целое число index, Строка className ) => Строка | Массив
  
  Функция, возвращающая один или несколько классов, разделенных пробелами, или массив классов, которые должны быть удалены. Принимает в качестве аргументов позицию индекса элемента в наборе и старое значение класса.

До версии jQuery 1.12/2.2 метод .removeClass() манипулировал className свойством выбранных элементов, а не class атрибутом. После изменения свойства браузер обновлял атрибут соответственно. Это означает, что при обновлении атрибута class и удалении последнего имени класса браузер мог установить значение атрибута в пустую строку вместо полного удаления атрибута. Следствием этого поведения было то, что этот метод работал только для документов с семантикой HTML DOM (например, не для чистых XML-документов).

Начиная с jQuery 1.12/2.2, это поведение изменено для улучшения поддержки XML-документов, включая SVG. С этой версии используется class атрибут вместо. Таким образом, .removeClass() может использоваться в XML или SVG-документах.

Можно удалить более одного класса одновременно, разделив их пробелом, из набора совпавших элементов, например:

  $( "p" ).removeClass( "myClass yourClass" )

Этот метод часто используется с .addClass() для переключения классов элементов с одного на другой, например:

  $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Здесь классы myClass и noClass удаляются из всех абзацев, а yourClass добавляется.

Для замены всех существующих классов другим классом можно использовать .attr( "class", "newClass" ) вместо этого.

Начиная с jQuery 1.4, метод .removeClass() позволяет указать класс для удаления, передав функцию.

  $( "li" ).last().removeClass(function() {
    return $( this ).prev().attr( "class" );
  });

В этом примере удаляется имя класса предпоследнего <li> из последнего <li>.

Примеры:

Удалить класс 'blue' из совпавших элементов.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).even().removeClass( "blue" );
  </script>
 
</body>
</html>

Демо:

Удалить классы 'blue' и 'under' из совпавших элементов.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).odd().removeClass( "blue under" );
  </script>
 
</body>
</html>

Демо:

Удалить классы 'blue' и 'under' из совпавших элементов (синтаксис 3.3+).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).odd().removeClass( [ "blue", "under" ] );
  </script>
 
</body>
</html>

Демо:

.removeClass()Возвращает: jQuery

Описание: Удалить все классы из каждого совпавшего элемента.

версия добавлена: 1.0.removeClass()
- Этот метод не принимает никаких аргументов.

Пример:

Удалить все классы из совпавших элементов.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).eq( 1 ).removeClass();
  </script>
 
</body>
</html>

Содержание:

.removeClass( className )Возвращает: jQuery

версия добавлена: 1.0.removeClass( className )

версия добавлена: 3.3.removeClass( classNames )

версия добавлена: 1.4.removeClass( function )

версия добавлена: 3.3.removeClass( function )

Примеры:

Демо:

Демо:

Демо:

.removeClass()Возвращает: jQuery

версия добавлена: 1.0.removeClass()

Пример:

Демо: