jQuery Add and Remove CSS Class

To control the CSS class given to HTML elements, jQuery provides numerous methods such as addClass(), removeClass(), toggleClass(), and so on.

jQuery addClass() Method

The jQuery addClass() function adds one or more class to the components that have been chosen.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-color{
            color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Add a Class to the Elements</h1>
<button class="btnAdd">Add Class</button><br>
<p>Learn to code for free</p>

<script>
    $(document).ready(function(){
        $(".btnAdd").click(function(){
            $("p").addClass("text-color");
        });
    });
</script>
</body>
</html>

Preview

You may also apply several class to components at the same time. Simply enter a space-separated list of class into the addClass() function, like this:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-color{
            color: #ff4842;
        }
        .bold{
            font-weight: 600;
        }
    </style>
</head>
<body>

<h1>Add multiple Class to the Elements</h1>
<button class="btnAdd">Add Class</button><br>
<p>Learn to code for free</p>

<script>
    $(document).ready(function(){
        $(".btnAdd").click(function(){
            $("p").addClass("text-color bold");
        });
    });
</script>
</body>
</html>

Preview

jQuery removeClass() Method

Similarly, the jQuery removeClass() function may be used to remove class from items. The removeClass() function can be used to remove a single class, several class, or all class from the specified components at once.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-color{
            color: #ffc107;
        }
    </style>
</head>
<body>

<h1>Remove Class from the Elements</h1>
<button class="btnRemove">Remove Class</button><br>
<p class="text-color">Learn to code for free</p>

<script>
    $(document).ready(function(){
        $(".btnRemove").click(function(){
            $("p").removeClass("text-color");
        });
    });
</script>
</body>
</html>

Preview

When the removeClass() function is used without an argument, it removes all class from the items that have been chosen. Here's an illustration:

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-color{
            color: #1890ff;
        }
        .bold{
            font-weight: 600;
        }
    </style>
</head>
<body>

<h1>Remove All the Class from the Elements</h1>
<button class="btnRemove">Remove Class</button><br>
<p class="text-color bold">Learn to code for free</p>

<script>
    $(document).ready(function(){
        $(".btnRemove").click(function(){
            $("p").removeClass();
        });
    });
</script>
</body>
</html>

Preview

jQuery toggleClass() Method

The jQuery toggleClass() function adds or removes one or more class from the selected elements in such a way that if an element already has the class, it is deleted; if an element does not have the class, it is added (i.e. toggle class).

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .text-color{
            color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Toggle the Class of the Elements</h1>
<button class="btnToggle">Toggle Class</button><br>
<p>Learn to code for free</p>

<script>
    $(document).ready(function(){
        $(".btnToggle").click(function(){
            $("p").toggleClass("text-color");
        });
    });
</script>
</body>
</html>

Preview

jQuery Remove

jQuery Style Properties

jQuery Add and Remove CSS Class

jQuery addClass() Method

Example

Example

jQuery removeClass() Method

Example

Example

jQuery toggleClass() Method

Example

Links

Tutorials

Connect with us