October 5, 2021

How to Add and Remove Class in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to add and remove class in javascript. As you already know that if you want to change the appearance of an element completely, then you have to make use of CSS classes. A CSS class contains a bunch of styles that can be directly applied to any element of your choice.

To dynamically add or remove any class, you have to make use of javascript. Each element has a classList property. This property returns all the applied classes to an element in the form of a DOMTokenList object.

There are a bunch of helpful methods to add, remove, or toggle a class. We are going to explore some of them in this tutorial.

In the following example, we have a bunch of button elements and a div element with a text “Hello World”. Upon click of each button element, we are going to perform various class-related actions. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button). The div element with a class of controls is just a wrapper for the button elements.
We also have one div element with the text “Hello World”. All class-related actions will be performed on this div element.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="controls">
        <button id="add">Add</button>
        <button id="remove">Remove</button>
        <button id="toggle">Toggle</button>
        <button id="check">Check</button>
        <button id="addAll">Add All</button>
        <button id="removeAll">Remove All</button>
    </div>

    <div class="hello">
        Hello World
    </div>

    <script src="script.js"></script>
</body>
</html>

.hello {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 200px;
    border: 2px solid black;
    margin: auto;
}

.controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

button {
    margin-left: 10px;
}

.bg {
    background-color: green;
    color: #fff;
}

.bd {
    border: 5px solid red;
}

Javascript

We have selected all the button elements and the div element using the document.querySelector() method and stored them in the add, remove, toggle, check, addAll, removeAll, and hello variables respectively.

We have attached the click event listener to all the button elements.

Adding Class

In the event handler function of add button, we are adding the bg class to the div element using the add() method.

Removing Class

In the event handler function of the remove button, we are removing the bg class from the div element using the remove() method.

Toggle Class

In the event handler function of the toggle button, we are toggling the bg class of the div element using the toggle() method.

Check if Class is Present

In the event handler function of the check button, we are using contains method of classList to verify whether the bg class is present in the list of the applied classes to the div element. This method returns a Boolean value.

We are displaying that Boolean value in the div element using the innerText property.

Adding Multiple Classes

In the event handler function of the addAll button, we are adding bg and bd classes to the div element using add() method.

Removing Multiple Classes

In the event handler function of the removeAll button, we are removing bg, bd, and hello classes from the div element using the remove() method.

const hello = document.querySelector('.hello');
const add = document.querySelector('#add');
const remove = document.querySelector('#remove');
const toggle = document.querySelector('#toggle');
const check = document.querySelector('#check');
const addAll = document.querySelector('#addAll');
const removeAll = document.querySelector('#removeAll');


add.addEventListener('click', () => {
    hello.classList.add('bg');
})

remove.addEventListener('click', () => {
    hello.classList.remove('bg');
})

toggle.addEventListener('click', () => {
    hello.classList.toggle('bg');
})

check.addEventListener('click', () => {
    hello.innerText = hello.classList.contains('bg');
})


addAll.addEventListener('click', () => {
    hello.classList.add('bg', 'bd');
})

removeAll.addEventListener('click', () => {
    hello.classList.remove('bg', 'bd', 'hello');
})

You May Also Like: