jQuery метод .removeClass()

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

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

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
$( selector ).removeClass(className)

Синтаксис 1.4:

Код
$( selector ).removeClass(function(index, currentClassName ))

где:

index - Integer

currentClassName - String

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

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

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

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

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

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

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html
HTML
<p class="greenColor decoration">Обычный абзац</p>
<p class="greenColor decoration">Обычный абзац</p>
<p class="greenColor decoration">Обычный абзац</p>
<p class="greenColor decoration">Обычный абзац</p>
main.js
JavaScript
$(document).ready(function () {
    $('p').click(function () {
        $(this).removeClass('decoration greenColor')
    })
})
style.css
CSS
.greenColor {
    color: green;
}
.decoration {
    text-decoration: underline;
}

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

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

Метод .removeClass() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<p>Обычный абзац</p>
<p class="redColor">Обычный абзац</p>
<p class="redColor">Обычный абзац</p>
<p>Обычный абзац</p>
main.js
JavaScript
$(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 // возвращаем значение (значение переменной соответствует классу элемента, который мы удаляем)
    })
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

.redColor {
  color: red; /* цвет текста красный */
}
div {
  color: blue; /* цвет текста синий */
}

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