Remove CSS Class From An HTML Element In JavaScript

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

1. Remove Class From Element — classList.remove()
2. Remove Class From Element — setAttribute()
3. Remove Class From Element — className Property
4. Remove Multiple Classes From An Element
5. Remove Class From All Elements
6. 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].