jQuery Add Remove Class on onClick

jQuery add remove class on click; Through this tutorial, i am going to show you how to add and remove class on html element using jQuery addClass(), removeClass(), toggleClass() method with onclick.

jQuery Add and Remove Class on onClick

There are three types of jQuery method available to add remove classes of the selected html elements:

addClass() method
removeClass() method
toggleClass() method

jQuery addClass() Method

Using the jQuery addClass () method can adds one or more classes to the selected html elements.

Syntax jQuery addClass() Method

$(selector).addClass();

Example 1 – How to Add Class in jQuery using addClass by Class

See the example of the jquery addClass() method for add class of the selected html elements using on click by class:

<!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>

jQuery removeClass() Method

Using the jQuery removeClass () method can remove one or more classes of the selected html elements. The removeClass() method can remove a single class, multiple classes of selected html elements.

Syntax jQuery removeClass() Method

$(selector).removeClass();

Example 1 – How to Remove Class in jQuery using removeClass by class

See the example of the jquery removeClass() method for remove class of the selected html elements using on click by class:

<!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>

jQuery toggleClass() Method

Using the jQuery toggleClass() can add or remove one or more classes from the selected html elements.
Incase 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 jQuery toggleClass() Method

$(selector).toggleClass();

Example 1 – How to Add and Remove Class in jQuery with on click by Class

See the following example of the jquery toggleClass() method, which is add remove class of the selected html elements by class with on click:

<!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>