Remove CSS Class From An HTML Element In JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2023-01-30 12:51:14

---
canonical_url: https://softauthor.com/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()](https://softauthor.com/remove-css-class-from-an-html-element-in-javascript/#remove-class-from-element-classlist-remove-method)
- [Remove Class From Element – setAttribute()](https://softauthor.com/remove-css-class-from-an-html-element-in-javascript/#remove-class-from-element-setattribute)
- [Remove Class From Element – className Property](https://softauthor.com/remove-css-class-from-an-html-element-in-javascript/#remove-class-from-element-classname-property)
- [Remove Multiple Classes From An Element](https://softauthor.com/remove-css-class-from-an-html-element-in-javascript/#remove-multiple-classes-from-element)
- [Remove Class From All Elements](https://softauthor.com/remove-css-class-from-an-html-element-in-javascript/#remove-class-from-all-elements)
- [Remove Class From Element On Click](https://softauthor.com/remove-css-class-from-an-html-element-in-javascript/#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**.

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

And here is the style for the **box** element.

```CSS
.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()](https://softauthor.com/get-element-by-tag-name-in-javascript/) method on the document method.

The [getElementsByTagName()](https://softauthor.com/get-element-by-tag-name-in-javascript/) method returns all the div elements as an [HTMLCollection](https://softauthor.com/javascript-htmlcollection-vs-nodelist/).

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**.

```JavaScript
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](https://softauthor.com/add-css-class-html-element-dynamically-javascript/).

###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**.

```JavaScript
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**.

```JavaScript
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**.

```HTML
<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()](https://softauthor.com/get-element-by-id-in-javascript/) 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.

```JavaScript
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.

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

The **className** property does exactly that as well.

```JavaScript
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.

```HTML
<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()](https://softauthor.com/javascript-get-elements-by-class-name/) method on the **document** object.

The [getElementsByTagName()](https://softauthor.com/javascript-get-elements-by-class-name/) will return all the div elements as an [HTMLCollection](https://softauthor.com/javascript-htmlcollection-vs-nodelist/) which is an array type object.

Assign it to a variable called **boxes**.

```JavaScript
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**.

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

Get DOM references of all the div elements that have the class **box** in them using the [getElementsByClassName()](https://softauthor.com/javascript-get-elements-by-class-name/) method on the document object.

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

```JavaScript
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](https://softauthor.com/e-target-in-javascript/).

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