jQuery метод .removeClass()

jQuery DOM методы

Определение и применение

jQuery метод .removeClass() удаляет один или несколько имен классов для выбранных элементов. Метод может быть также использован в документах XML и формате SVG.


Добавление класса, либо классов элемента Вы можете произвести с использованием jQuery метода .addClass().


jQuery синтаксис:

Синтаксис 1.0:
$( selector ).removeClass(className)

Синтаксис 1.4:
$( selector ).removeClass(className, function(index, currentClassName ))

где:
index - Integer
currentClassName - String

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4)

Значения параметров

ПараметрОписание
classNameЗадает одно или несколько имен классов, которые будут добавлены к элементу, или элементам.
function(index, currentClassName)Задает функцию, которая возвращает одно или несколько имен классов, которые будут добавлены.
  • index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • currentClassName - возвращает текущее имя класса выбранного элемента.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Удаление класса у элемента (jQuery метод .removeClass())</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "p" ).click(function(){ // задаем функцию при нажатиии на элемент <p>
	   $( this ).removeClass('greenColor decoration'); // удаляем у элемента <p> по которому произведен клик два класса
	  });
	});
		</script>
	</head>
	<body>
		<p class = "greenColor decoration">Обычный абзац</p>
		<p class = "greenColor decoration">Обычный абзац</p>
		<p class = "greenColor decoration">Обычный абзац</p>
		<p class = "greenColor decoration">Обычный абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .removeClass() мы удаляем два класса у элемента <p> (абзац) по которому произведён клик.

Результат нашего примера:

Пример удаления класса у элемента (jQuery метод .removeClass())
Пример удаления класса у элемента (jQuery метод .removeClass())

Рассмотрим пример в котором в качестве параметра метода .removeClass() передадим функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Функция удаления класса в случае его нахождения.</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){	  
	  $("p").removeClass(function(index, currentClass){ // задаем функцию в качестве параметра метода .removeClass()
	    var removedClass; // создаем переменную	
	    if (currentClass === "redColor") { // если класс элемента идентичен redColor
             removedClass = "redColor"; // присваиваем значение переменной (соответствует значению класса, который мы нашли)	
             $( "div" ).append("<p>удалён под индексом - " + index + "</p>"); // добавляем в элемент <div> информацию о индексе элементов, у которых удаляем класс
            }
            return removedClass; // возвращаем значение (значение переменной соответствует классу элемента, который мы удаляем)
	  });
	});
		</script>
	</head>
	<body>
		<p>Обычный абзац</p>
		<p class = "redColor">Обычный абзац</p>
		<p class = "redColor">Обычный абзац</p>
		<p>Обычный абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .removeClass() мы нашли все элементы <p> (абзац), которые имеют класс "redColor", удалили у них этот класс и с использованием метода .append() добавили в элемент <div> информацию о индексе элементов, у которых был удален класс .

Результат нашего примера:

Пример функции удаления класса в случае его нахождения.
Пример функции удаления класса в случае его нахождения.
jQuery DOM методы