Clear element.classList in JavaScript?

Javascript Web Development Front End Technology

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.