jQuery removeClass with Bootstrap Table, Div and Lists

The removeClass method

The jQuery removeClass method is used to remove one or more classes from the specified elements.

For example:

$(“div”).removeClass(“class_to_remove”);

The above code will remove the given class from all div elements in the web page.

To remove more than one class, separate it by space:

$(“div”).removeClass(“class_1 class_2 class_3”);

To remove all classes:

$(“div”).removeClass(“”);

See the following examples with HTML div, table, and other elements to better understand how it works along with the code.

A removeClass jQuery demo with a div element

In this example, a div is created with a class that specifies certain properties like background-color, font-size, font-family, etc.

As you click the button, the removeClass method executes.

jQuery removeClass demo with a div element

Complete code:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $(".btncls").click(function(){
    $(".divcls").removeClass("divcls");
  });
});
</script>
<style>

.divcls
{
  background: #D9534F;
  width:220px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
 
.btncls{
    background-color:#4F6677;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;

    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
} 
</style>
</head>
<body>

<div class="divcls">Click the button to remove the class by removeClass method</div>
<p>
<button class="btncls">Remove div Class</button>
</p>
</body>
</html>

On the click event of the button, the following code is executed to remove the div class:

  $(".btncls").click(function(){

$(".divcls").removeClass("divcls");

});

An example with an HTML table to use removeClass method

In this example, I am using an HTML table which is also created with CSS class. The table used the main table class along with table head and table data classes.

jQuery removeClass demo with HTML table

This is how the table class is removed by using the jQuery code:

<script>

$(document).ready(function(){

$(".btncls").click(function(){

$(".demotbl").removeClass("demotbl");

});

});

</script>

Complete code for this example

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $(".btncls").click(function(){
    $(".demotbl").removeClass("demotbl");
  });
});
</script>
<style>
/*Table theme 1*/
.demotbl {
    border-collapse: collapse;
    border: 1px solid #69899F;
  }
.demotbl th{
    border: 2px solid #69899F;
    color: #fff;
    padding:10px;
    background-color:#4F6677;
  }
.demotbl td{
    border: 1px dotted black;
    color: #002F5E;
    padding:15px;
    width:100px;
    background-color:#D6DEE4;
  }
  

 
.btncls{
    background-color:#4F6677;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;

    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
} 
</style>
</head>
<body>

<table class="demotbl" id="tbl">
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quality</th>
      <th>Product Quantity</th>
  </tr>
  <tr>
      <td>1</td>
      <td>Wheat</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Rice</td>
      <td>Good</td>
      <td>250 Bags</td>
  <tr>
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>  
</table>
<p>
<button class="btncls">Remove Table Class</button>
</p>
</body>
</html>

A demo of removeClass with Bootstrap based table

In this demo, a Bootstrap framework based table is created with different classes in the rows as web page loads.

As you click the button “Remove class from even rows”, it will remove the class from even rows as shown in the demo:

A demo of removeClass with Bootstrap table - showing removing a class in rows

You see classes from the second and fourth rows with danger and active classes are removed.

The code:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap basic table example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(document).ready(function(){
  $("#btnremove").click(function(){
    $("tr:even").removeClass();
  });
});
</script>
</head>
<body>
<div class="container ">
<table class="table table-bordered table-striped table-hover">
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quality</th>
      <th>Product Quantity</th>
  </tr>
  <tr class="info">
      <td>1</td>
      <td>Wheat</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>
  <tr class="danger">
      <td>2</td>
      <td>Rice</td>
      <td>Good</td>
      <td>250 Bags</td>
  <tr class="warning">
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>  
  <tr class="active">
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr> 
  <tr class="success">
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>     
</table>
<p>
<button id="btnremove" class="btn btn-danger">Remove class from even rows</button>
</p>
</div><br /><br />

</body>
</html>

An example of removing and adding a class in an HTML list

Generally, you use the addClass with the remove class method in different HTML elements.

For example, you want to give options to users to change the theme of the menu or navigation from one to another.

In that case, you can remove the existing class attached to that menu or other section by jQuery removeClass method and then add a new class chosen by the user.

A Gif demo of removing and adding a class in an HTML list

Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("#remcls1").click(function(){
    $("#mainmenu").removeClass().addClass("removeClassdemo");
  });

  $("#remcls2").click(function(){
    $("#mainmenu").removeClass().addClass("removeClassdemo2");
  });
  
  $("#remcls3").click(function(){
    $("#mainmenu").removeClass().addClass("removeClassdemo3");
  });  
  
});
</script>
<style>
.removeClassdemo{
    border-radius:5px;
}
.removeClassdemo ul {
    width:185px;
    list-style-type: none;
}

.removeClassdemo ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #4EBBDB;
    display:block;
    border-bottom:solid 1px #000;
}
 
/*Menu Theme 2*/
.removeClassdemo2{
    border-radius:5px;
}
.removeClassdemo2 ul {
    width:185px;
    list-style-type: none;
}

.removeClassdemo2 ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #5BB75B;
    display:block;
    border-bottom:solid 1px #000;
} 

/*Menu Theme 3*/
.removeClassdemo3{
    border-radius:5px;
}
.removeClassdemo3 ul {
    width:185px;
    list-style-type: none;
}

.removeClassdemo3 ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #F0AC4D;
    display:block;
    border-bottom:solid 1px #000;
}
 
</style>
</head>
<body>

<div class="removeClassdemo" id="mainmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
<a href="#" id="remcls1">Set Theme 1</a> |
<a href="#" id="remcls2">Set Theme 2</a> |
<a href="#" id="remcls3">Set Theme 3</a>

</body>
</html>

First, a div that contains menu items by using the <ul>, <li> and <a> tags is given the default class as the web page loaded. Below the menu, you can see three links to change the theme of the menu.

At the click event of these links, the removeClass method is executed along with the addClass method.

The removeClass will delete the existing class while addClass will add the selected class:

  $("#remcls1").click(function(){

$("#mainmenu").removeClass().addClass("removeClassdemo");

});



$("#remcls2").click(function(){

$("#mainmenu").removeClass().addClass("removeClassdemo2");

});



$("#remcls3").click(function(){

$("#mainmenu").removeClass().addClass("removeClassdemo3");

});

All these classes are placed in the <style> section of <head> tag.