EN
JavaScript - remove class from HTML element on click event
0 points
In this article, we would like to show you how to remove class from the HTML element on click event using JavaScript.
Quick solution:
xxxxxxxxxx
1
<div onclick="this.classList.remove('class-name')">Click me to remove 'class-name' class.</div>
Where:
class-name
is the name of the class that will be removed on click event.
In this example, we create removeClass()
function that accepts 2 arguments:
element
- handle to the HTML element,clazz
- class name to remove.
Using the removeClass()
function remove background
class from the div
element.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
.background {
7
background: yellow;
8
}
9
10
.border {
11
border: 1px solid red;
12
}
13
14
</style>
15
</head>
16
<body>
17
<script>
18
19
function removeClass(element, clazz) {
20
element.classList.remove(clazz);
21
}
22
23
</script>
24
<div class="background border" onclick="removeClass(this, 'background')">Click me!</div>
25
</body>
26
</html>