Remove a CSS class using JavaScript.

This is a tutorial on how to remove a CSS class from an HTML element using JavaScript.

To do this, we can either use regular JavaScript or the jQuery library.

Removing a CSS class using regular JavaScript.

Firstly, let’s remove a CSS class using vanilla JavaScript, as importing external libraries isn’t always an option for everyone.

Take a look at the following CSS and HTML:

<style>
    .myClass{
        font-weight: bold;
        color: red;
        padding: 10px;
        background: #eee;
        border:2px solid black;
        font-size: 20px;
    }
</style>

<!--Example div that has the ID "intro" and
the class "myClass"-->
<div id="intro" class="myClass">
    This is an example piece of text.
</div>

Above, we created a CSS class called “myClass” and then attached it to a DIV element that has the ID “intro”.

In order to remove this class from our HTML element, we will need to reference the element by its ID and then remove the class using classList.remove():

//Get the DIV element.
var div = document.getElementById('intro');

//Remove the CSS class using classList.remove()
div.classList.remove('myClass');

In the JavaScript snippet above:

We retrieved our element from the HTML DOM by using the document.getElementById() method. In this case, the element that we want to modify is a div with the ID “intro”.
After we retrieved the element, we were able to remove the CSS class by using classList.remove().

Note that if the ID you are referencing does not exist inside the DOM, then the following error will be thrown:

Uncaught TypeError: Cannot read property ‘classList’ of null

This error occurs because document.getElementById() returns a null value if the element does not exist.

As a result, you should always check to see if the element exists before you attempt to dynamically remove CSS classes from it.

Internet Explorer 9 does not support the classList property.

Older versions of Internet Explorer do not support the classList property.

The property was introduced in IE10, but with limited support.

As a result, you might want to use the following solution if your app is used by visitors with older browsers:

//Get the DIV element.
var div = document.getElementById('intro');

//Replace the class name with a blank string.
var newCSS = div.className.replace(/\bmyClass\b/g, "");

//Overwrite the className property with our new CSS classes
div.className = newCSS;

In the code above, we basically stripped out the class name that we wanted to remove and then replaced the className property.

However, this is not a perfect solution. If the element contains other CSS classes that contain the substring “myClass”, then that class name will be truncated:

<div id="example" class="admin-text admin">
    Another example
</div>

If we try to remove the class “admin” using the solution above, we will end up with the following:

<div id="example" class="-text ">
    Another example
</div>

As you can see, all instances of the word “admin” have been removed from our class attribute. Now, we’re left with malformed class names.

If you need to be more precise, then you can split the class list up into an array and then loop through it, assigning every class except the CSS class that you want to remove to a new string:

//Get the DIV element.
var div = document.getElementById('example');

//Split the class list up into an array.
var classes = div.className.split(" ");

//The class name we want to remove.
var cssClassToRemove = 'admin';

//The string that will contain our new classList
var newClassList = "";

//Do a for loop through our list of classes.
for(i = 0; i < classes.length; i++) {
    if(classes[i] !== cssClassToRemove) {
        newClassList += classes[i] + " ";
    }
}

//Finally, overwrite the className property
div.className = newClassList;

In the example above, we simply rebuilt the class list and omitted the class name that we wanted to remove. This is a simple and accurate solution. It also provides good support for older browsers.

Remove a CSS class with jQuery.

If you are already using the jQuery library in your application, then you can simply use the following example:

//Remove a CSS class using jQuery's removeClass() method.
 $('#example').removeClass('admin');

As you can see, removing a class with jQuery is pretty straightforward. All we had to do was reference the element and then call the removeClass() method. Nice and concise!