Remove a CSS class using JavaScript.

This is a tutorial on how to remove a CSS class from a 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:

Above, we’ve created a CSS class called “myClass” and attached it to a DIV element with 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():

In the JavaScript snippet above, we:

  1. 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”.
  2. 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:

In the code above, we basically stripped out the class name that we want 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:

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

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:

In the example above, we simply rebuilt the class list and omitted the class name that we wanted to remove. This is a simple, yet 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:

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!

Related: Add a CSS class using JavaScript.

Facebook Comments