Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Clear element.classList in JavaScript?
The task we are going to perform in this article is clear element classlist in JavaScript. Before we jump into the article let’s have a quick view on the few things.
All element objects (i.e., objects that represent elements) in a Document derive from the most general base class is called Element. It only contains functions and characteristics that apply to all types of elements.
Classlist in JavaScript
JavaScript classList is a DOM attribute that enables customizing of an element's CSS (Cascading Style Sheet) classes. The read-only JavaScript classList property retrieves the names of the CSS classes.
Syntax
Following is the syntax for classlist
element.classList
JavaScript remove() method
The JavaScript remove() method is used to remove an element from the DOM (Document Object Model). It can be used on any HTML element, such as a <div>, <span>, or even an entire page.
This method works by taking the selected element and its child elements, and then removing them from the document. The removed element will no longer exist in the DOM after this process has been completed.
Syntax
Following is the syntax for remove()
element.remove()
Example
In the following example we are running the script to clear the element classlist in JavaScript.
<!DOCTYPE html>
<html>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: #CCCCFF;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
<body>
<p>click to remove the element in classlist</p>
<button onclick="tutorial()">Try it</button>
<div id="myid" class="mystyle">
Welcome Everyone.
</div>
<script>
function tutorial() {
var element = document.getElementById("myid");
element.classList.remove("mystyle");
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text applied with CSS along with a prompt and a click button on the webpage. If the user clicks on the button, the event gets triggered and the CSS applied to the element is removed.
Example
Considering the following example, where we are using style property to remove particular class.
<!DOCTYPE html>
<html>
<body>
<style>
.bg {
background-color: #9FE2BF;
}
.text {
color: white;
}
</style>
<div id="box" class="text bg">AVATAR</div>
<button onclick="tutorial()">Click it</button>
<script>
function tutorial() {
const box = document.getElementById('box');
box.removeAttribute('class');
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the text applied with CSS along with a click button. If the user clicks the button, the event gets triggered, and the CSS applied element is removed.
Example
Let’s execute the below code to observe what it will do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>
.removeClass {
color: red;
}
</style>
<body>
<p id="remove" class="removeClass">Javascript Tutorial</p>
<button onclick="removeClassName()">Remove</button>
<script>
function removeClassName() {
const element = document.getElementById("remove");
element.classList.remove("removeClass");
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text applied with inline CSS along with a click button. If the user clicks the button, the event gets triggered and removes the CSS applied to the text.
500 Views
