In this tutorial, you will learn how to add and remove css classes on html elements with onlick using addClass(), removeClass(), toggleClass() method.
How to Add Class and Remove Class in jQuery
There are three types of jQuery methods available to add or remove classes of the selected html elements, you can use these methods to add or remove classes of the html elements using jQuery; as follows:
- addClass() method
- removeClass() method
- toggleClass() method
jQuery addClass() Method
The addClass() method in jQuery is used to add one or more CSS classes to the selected HTML elements. This allows you to dynamically apply styling to elements on a web page without directly modifying the HTML markup.
Syntax
$(selector).addClass();
Example of jQuery addClass() method
You can see that example of the jquery addClass() method, the following example will add class of the selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
padding: 15px;
background: #1EBBA3;
border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_click").click(function(){
$(".add_here").addClass("container");
});
});
</script>
</head>
<body>
<div class="add_here">
<h1>Hello World!</h1>
<p><strong>Note:</strong> If you click the following button it will add the '.container class' where is add_here exist </p>
<button type="button" id="btn_click">Click Here</button>
</div>
</body>
</html>
Output
Hello World!
Note: If you click the following button it will add the ‘.container class’ where is add_here exist
jQuery removeClass() Method
The removeClass() method in jQuery is used to remove one or more CSS classes from the selected elements in a webpage’s DOM (Document Object Model). jQuery is a popular JavaScript library that simplifies many aspects of DOM manipulation and interaction.
Syntax
$(selector).removeClass();
Example of jQuery removeClass() method
You can see that example of the jquery removeClass() method, the following example will remove class of the selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
padding: 15px;
background: #1EBBA3;
border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_remove").click(function(){
$(".add_here").removeClass("container");
});
});
</script>
</head>
<body>
<div class="add_here container">
<h1>Hello World!</h1>
<p><strong>Note:</strong> If you click the following button it will remove the '.container class', where is add_here class exist </p>
<button type="button" id="btn_remove">Click Here</button>
</div>
</body>
</html>
Output
Hello World!
Note: If you click the following button it will remove the ‘.container class’, where is add_here class exist
jQuery toggleClass() Method
Using the jQuery toggleClass()method, you can add or remove one or more classes from the selected html elements. In case if the selected html element already has the class, then it is removed. if an element does not have the class, then it is added.
Syntax
$(selector).toggleClass();
Example of jQuery toggleClass() method
You can see that example of the jquery toggleClass() method, the following example will add remove class of the selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
padding: 15px;
background: #1EBBA3;
border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_toggle").click(function(){
$(".add_here").toggleClass("container");
});
});
</script>
</head>
<body>
<div class="add_here container">
<h1>Hello World!</h1>
<p><strong>Note:</strong> If you click the following button it will add or remove the '.container class', where is add_here class exist </p>
<button type="button" id="btn_toggle">Click Here</button>
</div>
</body>
</html>
Output
Hello World!
Note: If you click the following button it will add or remove the ‘.container class’, where is add_here class exist
Recommended jQuery Tutorial
- jQuery Remove Attribute and Disabled Attribute From Element
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
