jQuery Remove Class

John on February 09, 2021

To remove a class name with jQuery, use the removeClass() method, passing the name of the class to remove as the first argument.

To demonstrate this, let's create a button and another HTML element with some classes and a jQuery function to remove a single class name when the button is clicked.

<div id="foo" class="col-2 inline active">Item content</div>

<button type="button" id="deactivate">Deactivate</button>

$('#deactivate').click(function () {
  $('#foo').removeClass('active');
});

<div id="foo" class="col-2 inline">Item content</div>

Removing Multiple Classes

To remove multiple classes from an element in jQuery, pass them as a space-separated list to the removeClass() method. It does not matter what order they are in.

<div id="foo" class="col-2 inline active">Item content</div>

<button type="button" id="deactivate">Deactivate</button>

$('#deactivate').click(function () {
  $('#foo').removeClass('active col-2');
});

<div id="foo" class="inline">Item content</div>

Get the Element Class Before Removing

Since jQuery 1.4 the removeClass() method accepts a function that will return a space-separated list of classes to remove. This is useful if you need to determine what classes an element has before removing any.

<div id="foo" class="col-2 inline active">Item content</div>

<button type="button" id="deactivate">Deactivate</button>

$('#deactivate').click(function () {
  $('#foo').removeClass(function () {

    if ($(this).hasClass('active')) {
      return 'active'
    } else {
      return 'inline';
    }
  });
});

<div id="foo" class="col-2 inline">Item content</div>

Removing an Array of Classes

Since jQuery 3.3 an array of classes can be supplied to removeClass() like this:

<div id="foo" class="col-2 inline active">Item content</div>

<button type="button" id="deactivate">Deactivate</button>

$('#deactivate').click(function () {

  var classes = ['active','col-2','inline'];

  $('#foo').removeClass(classes);
});