jQuery метод .removeClass()

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

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 - возвращает текущее имя класса выбранного элемента.

Параметр

Описание

className

Задает одно или несколько имен классов, которые будут добавлены к элементу, или элементам.

function(index, currentClassName)

Задает функцию, которая возвращает одно или несколько имен классов, которые будут добавлены.

index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
currentClassName - возвращает текущее имя класса выбранного элемента.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Удаление класса у элемента (jQuery метод .removeClass())</title>
		<style>.greenColor {
color: green; /* цвет текста зеленый */	
}
.decoration {
text-decoration: underline; /* декорирование текста (нижнее подчеркивание) */
}
</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())

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

<!DOCTYPE html>
<html>
	<head>
		<title>Функция удаления класса в случае его нахождения.</title>
		<style>.redColor {
color: red; /* цвет текста красный */	
}
div {
color: blue; /* цвет текста синий */	
}
</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 методы