How to add and remove class in JavaScript on click

How to add and remove class in JavaScript on click.

learn about how you can add class to div on button click.

let’s start with examples.

1: How to add and remove class in JavaScript on click.

In this example, I will show you how you can add the functionality of adding and removing classes on a single button.

How to add and remove class in javascript on click
How to add and remove class in javascript on click
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<style type="text/css">
		.class-1{
			border:2px;
			background-color: red;
			color: white; 

		}
	</style>
</head>
<body>


<h1>
	Add and remove class from div on single button.
</h1>	

<div id="Test" class = "class-1">
	Class will be added and remove with single button.
</div>
<input type="button" name="" onclick="changeClassName()" value="Add/Remove Class">
<script>
	
	
	function changeClassName()
	{
    document.getElementById("Test").classList.toggle("class-1");
       
	}
</script>

</body>
</html>

In the above example when the user will click on the button the “class-1” class will be added to the div if the class is already added then the class will be removed from the div.

“document.getElementById(“Test”)” this code will select div for the operation and “classList.toggle(“class-1″)” code will add toggle functionality.

for explaining it more effectively I used background color on the div, if you are seeing a div with background color then it means the class is added to the div else the class is removed from the div. you can add your own code with the same functionality.

2: How to add class in JavaScript.

Now you already learned how to add or remove classes using javascript, now in the below example, I will show you how you can add classes to div. Let’s check.

How to add class in JavaScript
How to add class in JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<style type="text/css">
		.class-1{
			border:2px;
			background-color: red;
			color: white; 

		}
	</style>
</head>
<body>


<h1>
	Add class to div on single button.
</h1>	

<div id="Test" class = "">
	Class will be added to div on single button click.
</div>
<input type="button" name="" onclick="AddClass()" value="Add Class">
<script>
	
	
	function AddClass()
	{
    document.getElementById("Test").classList.add("class-1");
       
	}
</script>

</body>
</html>

The above example contains code for adding a class to a div, for this first I have selected the div by its id which is “Test”, after selecting the id I have written code for adding a class to it which is “class-1”.

I have also written code to highlight div by adding it a background color. it will make you understand better how the functionality works. background-color to div is added by using CSS (Cascading Style Sheets).

CSS is used to add styling functionality to HTML elements. In the upcoming article, you will learn more about CSS as well.

3: How to remove class in JavaScript.

Now You already know how to add class to div, in below example I will show you how you can remove class which is already added to div by using div id.

How to remove class in JavaScript
How to remove class in JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<style type="text/css">
		.class-1{
			border:2px;
			background-color: red;
			color: white; 

		}
	</style>
</head>
<body>


<h1>
	Remove class to div on single button click.
</h1>	

<div id="Test" class = "class-1">
	Class will be removed from div on single button click.
</div>
<input type="button" name="" onclick="RemoveClass()" value="Remove Class">
<script>
	
	
	function RemoveClass()
	{
    document.getElementById("Test").classList.remove("class-1");
       
	}
</script>

</body>
</html>

The above example is similar to the earlier one, in this example, I have written code to remove the class from div using JavaScript which is already added to it.

“document.getElementById(“Test”).classList.remove(“class-1″);” code will remove the class from div having id “Test”, I have added this code to RemoveClass() function, this function will be called when the user will click on the button “Remove Class”.

Share this article with your friends who need this, and help them to learn to code more effectively.

Comment with your suggestions or questions, I will love to answer them.

### JavaScript Change class with multiple examples.

### Remove square brackets from string JavaScript

### Settimeout JavaScript Examples

### Hosted Libraries By google

Leave a Comment

Your email address will not be published. Required fields are marked *