4 examples to use jQuery removeClass with Bootstrap table, div and others
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:
To remove all classes:
See the following online 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. See the output:
See online demo and code
On the click event of button, following code is executed to remove the div class:
An example with 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 main table class along with table head and table data classes.
See online demo and code
This is how the table class is removed by using the jQuery code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $(".btncls").click(function(){ $(".demotbl").removeClass("demotbl"); }); }); </script> |
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:
See online demo and code
You see classes from second and fourth rows with danger and active classes are removed. The code used in the <script> section to removeClass is:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("#btnremove").click(function(){ $("tr:even").removeClass(); }); }); |
Similarly, you can use tr:odd selector to remove the class from odd rows.
An example to remove and add class in HTML list
Generally, you use the addClass with remove class method in different HTML elements. For example, you want to give options to users to change the theme of 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.
See this sort of demo online:
See online demo and code
First, a div that contains menu items by using the <ul>, <li> and <a> tags is given the default class as 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 executed along with the addClass method. The removeClass will delete the existing class while addClass will add the selected class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$("#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. You can see the complete code in the demo page.