How to Add or Remove Element Class Name using JavaScript

In this tutorial, we are going to learn about how to add or remove a class name to an html element by using JavaScript.

Consider we have a div element with an id, and two button elements.

<div id="box">
  This is div
</div>

<button id="add-btn">Add class</button>
<button id="remove-btn">Remove class</button>

Now, we need to add a class to the div element by clicking on a Add class button and remove a class by using the Remove class button.

Adding class

In JavaScript, we have a classList property which contains a add() method that is used to add a class to an element.

Example:

const div = document.getElementById('box');
const addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click',()=>{
    div.classList.add('shadow');})

Now, if we click on a Add class button the shadow class is added to the div element.

Removing class

To remove a class we need to use the remove() method in classList property.

const div = document.getElementById('box');
const removeBtn = document.getElementById('remove-btn');

removeBtn.addEventListener('click',()=>{
    div.classList.remove('shadow');})

Now, if we click on a Remove class button the shadow class is removed from the div element.

Codepen Demo