jQuery removeClass & addClass On Button Click By E.g.

jQuery removeClass & addClass On Button Click By E.g.

jQuery add remove css class using addClass(), removeClass(), toggleClass() Method – how to use this jquery methods for add and remove css class of selected html elements. Here, you will learn how to add or remove CSS classes using jQuery.

jQuery Add and Remove CSS Classes

There are three types of jQuery method available to add remove classes of the selected html elements, we can use these methods to add remove class of the 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

$(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

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will add the ‘.container class’ where is add_here exist

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

$(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

Removing all the Contents using empty() jQuery

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() 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

$(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

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will add or remove the ‘.container class’, where is add_here class exist

Leave a Reply

Your email address will not be published. Required fields are marked *