How to remove classes from HTML elements using jQuery.removeClass()

jQuery was originally created to simplify DOM manipulation. By using jQuery.removeClass(), you can access elements and remove their CSS classes with little effort.

What is the jQuery.removeClass() method?

jQuery.removeClass() allows you to remove one or all CSS classes from a selected element without changing the entire class attribute value. This means that you can selectively remove specific classes to interactively control the styling and behaviour of the website. If you want to add classes, use jQuery.addClass(). You can also use jQuery.on() to set event handlers for specific events that trigger the removal of CSS classes through jQuery.removeClass(). Using the method is straightforward if you use jQuery in WordPress

Tip

Webspace from IONOS offers you the possibility to rent ad-free storage space for your web applications. For this purpose, IONOS provides you with domains and email addresses tailored to your requirements.

What do the syntax and parameters for jQuery.removeClass() look like?

The jQuery.removeClass() method is structured as follows:

$(selector).removeClass(classname, function(index, currentclass))
jQuery

The classname is the name of the class or classes to be removed. function(index, currentclass) is the function that will be executed for each of the selected elements while removing the class. Finally, the index parameters specify the index of the current element and currentclass specifies the current value of the CSS class being removed.

If you want to learn more about selectors and the syntax of jQuery, we recommend our jQuery tutorial.

Tip

Optimise your work processes and increase efficiency with the IONOS Developer API. You can create a secure access key for your hosting projects and use it to manage your resources automatically.

Examples for the use of jQuery.removeClass()

Below we present three different uses of the jQuery.removeClass() method:

jQuery.removeClass() without parameters

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <script>
       $(document).ready(function(){  
     $("#btn").click(function(){
       $("p").removeClass();
     });
       });
   </script>
 </head>
 <body>
   <p class="big-font blue">Example text</p>
   <button id="btn">Click to remove classes</button>
 </body>
</html>
html

If you call jQuery.removeClass() without arguments, you can remove all classes of the respective element. In this example, we have associated removeClass() with the jQuery.click() function. When the button with ID btn is clicked, both classes big-font and blue are removed from the <p> element.

Remove specific classes

If you want to remove a special list of classes, just specify it as a space-separated string:

$("h1").removeClass("highlight uppercase bold")
jQuery

By using the expression removeClass("highlight uppercase bold") we remove the three classes highlight, uppercase and bold from the <h1> element.

Passing a function as argument

$(document).ready(function() {
    $("#btn").click(function() {
        $("div#container").removeClass(function() {
            return $(this).attr("class");
        });
    });
});
jQuery

Here we use the jQuery.removeClass() function to remove all CSS classes from a <div> element with ID container, as soon as the button with the ID btn is clicked. The .attr("class") function we pass to removeClass() returns the current class attribute value of the element. This will remove all existing CSS classes from the <div> element.

Tip

Deploy Now from IONOS allows you to deploy web applications directly from GitHub. In just a few steps, your project can be automatically deployed. Additionally, the actions workflow is customisable at any time. Get quick live feedback with the preview URL for automatic staging.

Was this article helpful?