Clear element.classList in JavaScript?

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

To clear, you can use remove() in JavaScript.

Example

Following is the code −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<style>
   .removeClass {
      color: red;
   }
</style>
<body>
<p id="remove" class="removeClass">Javascript Tutorial</p>
</div>
<button onclick="removeClassName()">Remove</button>
</body>
<script>
   function removeClassName() {
      const element = document.getElementById("remove");
      element.classList.remove("removeClass");
   }
</script>
</html>

To run the above program, save the file name anyName.html(index.html). Right click on the file and select the option “Open with live server” in VS Code editor.

This will produce the following output −

Now, click the remove button, you will get the following output.

Output

This will produce the following output −

raja
Updated on 27-Oct-2020 10:10:25

Advertisements