jQuery was orig­i­nal­ly created to simplify DOM ma­nip­u­la­tion. By using jQuery.re­move­Class(), you can access elements and remove their CSS classes with little effort.

What is the jQuery.re­move­Class() method?

jQuery.re­move­Class() 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 se­lec­tive­ly remove specific classes to in­ter­ac­tive­ly control the styling and behavior 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.re­move­Class(). Using the method is straight­for­ward if you use jQuery in WordPress

Tip

Webspace from IONOS offers you the pos­si­bil­i­ty to rent ad-free storage space for your web ap­pli­ca­tions. For this purpose, IONOS provides you with domains and email addresses tailored to your re­quire­ments.

What do the syntax and pa­ra­me­ters for jQuery.re­move­Class() look like?

The jQuery.re­move­Class() method is struc­tured 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 pa­ra­me­ters 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

Optimize your work processes and increase ef­fi­cien­cy with the IONOS Developer API. You can create a secure access key for your hosting projects and use it to manage your resources au­to­mat­i­cal­ly.

Examples for the use of jQuery.re­move­Class()

Below we present three different uses of the jQuery.re­move­Class() method:

jQuery.re­move­Class() without pa­ra­me­ters

<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.re­move­Class() without arguments, you can remove all classes of the re­spec­tive element. In this example, we have as­so­ci­at­ed re­move­Class() 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 ex­pres­sion 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.re­move­Class() 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 ap­pli­ca­tions directly from GitHub. In just a few steps, your project can be au­to­mat­i­cal­ly deployed. Ad­di­tion­al­ly, the actions workflow is cus­tomiz­able at any time. Get quick live feedback with the preview URL for automatic staging.

Go to Main Menu