Remove CSS Class From An HTML Element In JavaScript

Learn how to remove a CSS class from an HTML element dynamically in JavaScript.

• Remove Class From Element – classList.remove()
• Remove Class From Element – setAttribute()
• Remove Class From Element – className Property
• Remove Multiple Classes From An Element
• Remove Class From All Elements
• Remove Class From Element On Click

1. Remove A Class From An Element Using classList.remove()

Here is a simple div element with the class name box.

<div class="box">box</div>

And here is the style for the box element.

.box {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:100px;
  background:red;
  margin:10px;
  text-align:center;
}

Get the DOM references of all of the div elements from the HTML document using the getElementsByTagName() method on the document method.

The getElementsByTagName() method returns all the div elements as an HTMLCollection.

Assign the HTMLCollection to a constant called boxes.

We’ve only one div element in our HTML code ,so we can access it using its index position 0.

So, boxes[0].

Now remove the box class from the div element by calling the classList.remove() method on the div element object.

const boxes = document.getElementsByTagName("div");
boxes[0].classList.remove("box");

You can also use classList API to add a class to an element using the add() method.

2. Remove Class From An Element Using setAttribute()

Alternatively, you can remove a class from an element using the setAttribute() method.

The setAttribute() method takes two arguments.

The first one is the attribute name, in this case class.

The second argument is a value, in this case empty string which removes all the classes from an element.

const boxes = document.getElementsByTagName("div");
boxes[0].setAttribute("class", "");

If you want to remove a specific class from an element and leave the others as they are, use the classList.remove() method instead.

3. Remove Class From An Element Using className Property

Similar to the setAttribute() method, you can also use the className property to remove a class from an element.

const boxes = document.getElementsByTagName("div");
boxes[0].className = "";

Setting an empty string to the className property of the element object will remove all of the classes from an element.

4. Remove Multiple Classes From An Element

Learn how to remove more than one class from an element using:

1. classList.remove()
2. setAttribute()
3. className property

Here is the simple div element that has four classes: box, orange, circle, blue.

<div class="box orange circle blue" id="myDiv">box</div>

Let’s remove the circle and orange classes from the div element.

Get a DOM reference of the div element using the getElementById() method on the document object.

This method will return a single element object.

Assign it to a constant called box.

The remove() method of the classList API takes one or more class names as arguments that will be removed from an element.

It only removes the class names mentioned as arguments separated by a comma and leaves the other classes as they are.

const box = document.getElementById("myDiv");
box.classList.remove("circle", "orange");

The setAttribute() method on the otherhand, removes all the existing class names of an element and replaces it with the box and blue classes.

const box = document.getElementById("myDiv");
box.setAttribute("class", "box blue");

The className property does exactly that as well.

const box = document.getElementById("myDiv");
box.className = "box blue";

5. Remove Class From All Elements

Learn how to remove a class from all the elements at once dynamically using JavaScript.

Here are the five div elements that have the box class in them.

<div class="box">div <br>1</div>
<div class="box">div <br>2</div>
<div class="box">div <br>3</div>
<div class="box">div <br>4</div>
<div class="box">div <br>5</div>

Get DOM references of all the div elements using the getElementsByTagName() method on the document object.

The getElementsByTagName() will return all the div elements as an HTMLCollection which is an array type object.

Assign it to a variable called boxes.

const boxes = document.getElementsByTagName("div");
for(const box of boxes) {
  box.classList.remove("box");
}

Loop through them using for..of and define the box constant in the loop header which will hold the div element on each iteration.

Inside the loop, use the remove() method on the classList API to remove the class box from each element.

6. Remove Class From An Element On Click

Learn how to remove a class from an element on click.

Here is a simple div element with the class name box.

<div class="box">box</div>

Get DOM references of all the div elements that have the class box in them using the getElementsByClassName() method on the document object.

This will return an HTMLCollection and assign it to a constant called boxes.

const boxes = document.getElementsByClassName("box");
const boxPressed = (e) => {
  e.target.classList.remove("box");
}
boxes[0].addEventListener("click", boxPressed);

Get the first div element that has the box class in it by using its index position 0…boxes[0].

Alternatively, you could also use the getElementById() if you want to get a single element object instead of an HTMLCollection.

Attach a click event to the element object with the callback function boxPressed.

Inside the boxPressed function, get the clicked element by using the target property on the event object.

Finally, remove the box class from an element using the remove() method on the classList API.