Add and remove class in vanilla JavaScript Vanilla JS

It is useful to add a class to or remove a class from an HTML element using JavaScript when something happens like when a certain element is clicked. You can then do something like change the styles of an element only when the class is added. This is how to add a class to and remove a class from an HTML element in vanilla JavaScript.

Add class in vanilla JavaScript

You add a class to an HTML element by using classList.add() on the element in JavaScript.

element.classList.add("class-name");

Remove class in vanilla JavaScript

You remove a class from an HTML element by using classList.remove() on the element in JavaScript.

element.classList.remove("class-name");

Toggle class in vanilla JavaScript

You toggle a class (add or remove) on an HTML element by using classList.toggle() on the element in JavaScript.

element.classList.toggle("class-name");

You can also toggle a class manually for more control, see toggle class in vanilla JavaScript.

Add or remove multiple classes with vanilla JavaScript

You can add multiple classes to or remove multiple classes from an HTML element in one JavaScript statement by comma separating the classes.

//add multiple classes
element.classList.add("class-name", "another-class");

//remove multiple classes
element.classList.remove("class-name", "another-class");

Selecting the element

To add or remove a class, you first need to select the element in JavaScript. Here is a full example of adding a class to an HTML element with vanilla JavaScript including selecting the element in JavaScript.

const el = document.querySelector("#element-id");
el.classList.add("class-name");

This stores the element with an id of "element-id" in a const variable named "el", which we then use whenever we need to reference that element. In practice, you'd use a more specific variable name because you may create many variables and it is best to choose variable names that tell you exactly what they store.

Add or remove a class on click

If you only want to add or remove a class when something is clicked, you can wrap your statement in a click event listener. The code inside will only run when there is a click event on the element the event handler is attached to, in this case, the element stored in our variable named el.

const el = document.querySelector("#element-id");

el.addEventListener("click", function(event) {
  event.preventDefault();
  //add a class
  el.classList.add("class-name");
  //or remove a class
  //el.classList.remove("class-name");
  //or toggle a class
  //el.classList.toggle("class-name");
});

event.preventDefault(); is useful to stop the browser sending the user to an anchor a element's href url when it is clicked if you're using an anchor for anything other than sending the user to another page. In this case, we are just checking for a click event and then adding or removing a class with JavaScript.

The element you add a click event listener to may be a different element to the element you want to add the class to or remove the class from. In that case you'll need to select the second element with JavaScript as well and use that one inside the event listener.

const addToBasket = document.querySelector("#add-to-basket");
const basketIcon = document.querySelector("#basket-icon");

addToBasket.addEventListener("click", function(event) {
  event.preventDefault();
  //add a class
  basketIcon.classList.add("green");
});

Thanks for reading.
Ryan

Published on 14 Aug 2022

Get element in vanilla JavaScript Toggle class in vanilla JavaScript Toggle nav in vanilla JavaScript On load in vanilla JavaScript Get scroll position in vanilla JavaScript Get window width in vanilla JavaScript Scroll to top in vanilla JavaScript Scroll to element in vanilla JavaScript Defer vs async script Convert string to number in vanilla JavaScript Get and set URL parameter in vanilla JavaScript Fade in animation on scroll with vanilla JavaScript and CSS Change CSS with JavaScript