15 December 2023

How to Add and Remove HTML Classes with jQuery

By Ronald Smith

Adding and removing HTML classes can be done dynamically to create an interactive website. With jQuery, this process becomes simple and efficient. Let me show you how to add and remove the class “my-new-class” from an element.

$( “div” ).addClass( “my-new-class” );

$( “div” ).removeClass( “my-new-class” );

Don’t worry if you’re not familiar with jQuery; you can achieve the same result using plain JavaScript:

document.getElementById( “elem” ).className = “my-new-class”;

document.getElementById( “elem” ).className = document.getElementsByTagName( “div” )[0].className.replace( /(?:^\s)my-new-class(?!\S)/g, “” );

When it comes to manipulating JavaScript, there’s another option besides jQuery: direct manipulation. Although it may not be as concise, it’s a good choice for those who prefer not to use a framework. And now, with the modern classList API, class manipulation has become even more convenient.

How to Find Out Where Users Are with HTML5 Geolocation API

Knowing a user’s location can be incredibly useful in improving their experience on a website, especially for E-commerce purposes. Want to learn more?

Playing with Classes Using the classList API

Similar to jQuery, the classList API offers a range of methods to easily modify HTML classes. You can even retrieve a list of all the classes within a div:

var classes = document.getElementById(‘elem’).classList;

console.log(classes);

If you check out the browser Console, you’ll see the list of classes displayed there.

To change classes, you can use the .add() and .remove() methods:

“`javascript

var elem = document.getElementById(‘elem’);

// Add class

elem.classList.add(‘my-new-class’);

// Remove class

elem.classList.remove(‘my-new-class’);

“`

Adding multiple classes is easy, simply separate each class with a comma:

“`javascript

elem.classList.add(‘my-new-class’, ‘my-other-class’);

“`

To check if a specific class is present, you can use .contains(). It will return true if the class is found and false otherwise:

“`javascript

elem.classList.contains(‘class-name’);

“`

If you want to toggle a class based on user interaction, like a mouse click, you can use .toggle():

“`javascript

var button = document.getElementById(‘button’);

function toggle(){

elem.classList.toggle(‘bg’);

}

button.addEventListener(‘click’, toggle, false);

“`

Feel free to explore the functionality using the links below:

Final Thoughts

The classList API is an exciting addition to HTML5 that simplifies the way we manipulate classes in modern browsers like Firefox 3.6, Opera 11.5, Chrome 8, and Safari 5.1. Unfortunately, it’s not supported in Internet Explorer 9 and earlier versions. Don’t worry! There’s a solution called Polyfills, which can help you implement the classList API in Internet Explorer for compatibility.

Further Reading

  • Check out HTML5 Doctor’s in-depth article on The classList API.
  • Learn more about Element classList on the Mozilla Developer Network (MDN) website.

Remember: This post was originally published on January 17, 2014.

Just a reminder: This post was initially published on January 17, 2014.