.removeClass() JQ Home  <<  A & P  <<  .removeClass()

Removing classes from CSS.

Description

The .removeClass() method is used to remove the specified class(es) or all classes from each element of the matched set.

  • Often used in tandem with the .addClass() method to switch class styling.

The .removeClass(classNames) method was added in jQuery 3.3.

Syntax

Signature Description
.removeClass()Remove all classes from each element within the matched set.
.removeClass( className )Remove one or more classes from each element within the matched set.
.removeClass( classNames )An array of classes to be removed from each element within the matched set.
.removeClass( function(index, currentClass) )A function returning one or more classes to be removed from each element within the matched set.

Parameters

Parameter Description Type
classNameOne or more space-separated class names.String
classNamesAn array of class names.Array
function(index, currentClass)A function to execute on each element within the matched set.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing class(es) pertaining to the current element are also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

A jQuery object.

.removeClass() Example A & P  <<  Top

Remove all classes from each element within the matched set.

In the example below when we press the button we remove all classes from the table below.

Table For Testing The .removeClass() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


$(function(){
  $('#btn4').on('click', function() {
    $('.testtable').removeClass(); 
  });
});

Press the button below to action the above code:

.removeClass( className ) ExamplesA & P  <<  Top

Remove one or more classes from each element within the matched set.

In the example below when we press the left button we remove the 'turnOrange' class and so the table rows in the table below marked with that class revert to their original colour.

When we press the right button we select all 'td' elements with a class of 'turnYellow' within the table, remove that class and add the class 'turnAqua' detailed below.


.turnAqua {
  background-color: aqua;
}
.turnOrange {
  background-color: orange;
}
.turnYellow {
  background-color: yellow;
}
Table For Testing The .removeClass( className ) Signature
Table Row 1, Table Data 1 Table Row 2, Table Data 1  (class of turnOrange)
Table Row 2, Table Data 1  (class of turnYellow) Table Row 2, Table Data 2  (class of turnYellow)
Table Row 3, Table Data 1  (class of turnYellow) Table Row 3, Table Data 2  (class of turnOrange)
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of turnYellow) 


$(function(){
  $('#btn5').on('click', function() {
    $('.testtable2 td').removeClass('turnOrange'); 
  });
  $('#btn6').on('click', function() {
    $('.testtable2 .turnYellow').removeClass('turnYellow') 
                                .addClass('turnAqua'); 
  });
});

Press the button below to action the above code:

             

.removeClass( classNames ) ExamplesA & P  <<  Top

Remove an array of classes from each element within the matched set.

In the example below when we press the button we remove the 'turnOrange' and 'turnYellow' classes revealing the original background color.


.turnOrange {
  background-color: orange;
}
.turnYellow {
  background-color: yellow;
}
Table For Testing The .removeClass( classNames ) Signature
Table Row 1, Table Data 1 Table Row 2, Table Data 1  (class of turnOrange)
Table Row 2, Table Data 1  (class of turnYellow) Table Row 2, Table Data 2  (class of turnYellow)
Table Row 3, Table Data 1  (class of turnYellow) Table Row 3, Table Data 2  (class of turnOrange)
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of turnYellow) 


$(function(){
  $('#btn5').on('click', function() {
    $('.testtable4 td').removeClass(['turnOrange', 'turnYellow']); 
  });
});

Press the button below to action the above code:

.removeClass( function(index, currentClass) ) Example A & P  <<  Top

Execute a function that returns one or more classes to be removed from each element within the matched set.

In the example below when we press the button we select all 'td' elements within the table with an id of 'testtable3'. We then iterate over the collection removing any class that is 'turnYellow' etc. We end up with all rows returned to a colour of orange.


.turnAqua {
  background-color: aqua;
}
.turnOlive {
  background-color: olive;
}
.turnSilver {
  background-color: silver;
}
.turnYellow {
  background-color: yellow;
}
Table For Testing The .removeClass( function(index, currentClass) ) Signature
Table Row 1, Table Data 1  (class of turnYellow) Table Row 2, Table Data 1  (class of turnSilver)
Table Row 2, Table Data 1 Table Row 2, Table Data 2  (class of turnAqua)
Table Row 3, Table Data 1  (class of turnYellow) Table Row 3, Table Data 1  (class of turnAqua)
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of turnOlive) 


$(function(){
  $('#btn7').on('click', function() {
    $('.testtable3 td').removeClass( function( index, currentClass ) {
      var loseClass;
      if ( currentClass === 'turnYellow' ) {
    	  loseClass = 'turnYellow';
      } else if ( currentClass === 'turnSilver' ) {
    	  loseClass = 'turnSilver';
      } else if ( currentClass === 'turnAqua' ) {
    	  loseClass = 'turnAqua';
      } else {
    	  loseClass = 'turnOlive';
      }
      return loseClass;
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 8 - Working With CSS Classes