JavaScript provides a straightforward approach for eliminating both individual and multiple classes from elements. To achieve this, we can utilize the querySelector in conjunction with the remove method. It is essential to employ the classList property to access and manipulate multiple classes. For handling several classes, a "for" loop can be employed in JavaScript.
Syntaxes
The syntax for removing classes functions on both single and multiple UI elements that share the same class.
Syntax 1:
The syntax provided below is utilized to eliminate a specific class from the webpage.
const ele_var = document.querySelectorAll('p');
element.classList.remove('first_class', 'second_class');
Syntax 2:
The syntax provided below is utilized to eliminate several classes from a web page.
const ele_var = document.querySelectorAll('p');
ele_var.forEach((element) => {
element.classList.remove('first_class', 'second_class');
});
Clarification
- The "for loop" is essential for enabling the functionality across multiple classes.
- The "classList.remove(class_names)" method is crucial for eliminating one or more class UI elements from the web page.
Examples
The subsequent examples demonstrate the utilization of the remove method to eliminate the user interface components of both single and multiple classes utilizing JavaScript.
Example 1
In this section, we will eliminate the single instance of various classes that share identical names and tag names on the web page. Specifically, we will remove the class named "second_class" associated with the p tag by employing the click button function.
<!DOCTYPE html>
<html>
<head>
<title> How to remove multiple classes in javascript </title>
<style>
.second_class {
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
font-size: larger;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3> How to remove multiple classes in javascript </h3>
<p> Here, we can remove the multiple classes of the web page. </p>
<button onclick="removeClass()">Remove</button>
<p class = "first_class"> hii </p>
<p class = "second_class" id = "second_class"> hello </p>
<p class = "second_class " id = "second_class "> welcome </p>
<script>
function removeClass() {
//Selecting the element
let p_select = document.getElementById("second_class");
p_select.classList.remove('first_class','second_class');
}
</script>
</body>
</html>
Output
The single class UI is eliminated from the web page through the utilization of JavaScript.
After removing output
Example 2
In this section, we will eliminate the two classes that possess distinct names within the body tag. The class names "firstclass" and "secondclass" will be removed utilizing the click button function.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Javascript - add and remove class</title>
<style>
.second_class {
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.first_class {
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3> How to remove multiple classes in javascript </h3>
<p> Here, we can remove the multiple classes of the web page. </p>
<button onclick="removeClass()">Remove</button>
<p class = "first_class" id = "first_class"> hii </p>
<p class = "second_class" id = "second_class"> hello </p>
<p class = "fourth_class" id = "fourth_class"> welcome </p>
<p class = "third_class" id = "third_class"> Learn </p>
<script>
function removeClass() {
const ele_var = document.querySelectorAll('p');
ele_var.forEach((element) => {
element.classList.remove('first_class', 'second_class');
});
}
</script>
</body>
</html>
Output
The single class UI is eliminated from the web page via JavaScript.
Before removing output
After removing output
Example 3
In this section, we will eliminate the redundant classes that share identical names and tag names on the web page. By utilizing the click button functionality, we will remove the two instances of the "second_class" class associated with the p tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - add and remove class</title>
<style>
.second_class {
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.first_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3> How to remove multiple classes in javascript </h3>
<p> Here, we can remove the multiple classes of the web page. </p>
<button onclick="removeClass()">Remove</button>
<p class = "first_class" id = "first_class"> hii </p>
<p class = "second_class" id = "second_class"> hello </p>
<p class = "second_class " id = "second_class "> welcome </p>
<p class = "third_class" id = "third_class"> Learn </p>
<script>
function removeClass() {
const ele_var = document.querySelectorAll('p');
ele_var.forEach((element) => {
element.classList.remove('second_class');
});
}
</script>
</body>
</html>
Output
JavaScript can be utilized to eliminate two distinct classes of user interface elements from a web page.
Before removing output
After removing output
Example 4
In this section, we will demonstrate how to eliminate several classes that possess distinct tag names from a web page. By utilizing the click button functionality, we will remove the two classes designated as "secondclass" and "thirdclass," both associated with the p and div tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - add and remove class</title>
<style>
.second_class {
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.first_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.third_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3> How to remove multiple classes in javascript </h3>
<p> Here, we can remove the multiple classes of the web page. </p>
<button onclick="removeClass()">Remove</button>
<div class = "first_class" id = "first_class"> hii </div>
<p class = "second_class" id = "second_class"> hello </p>
<div class = "second_class " id = "second_class "> welcome </div>
<p class = "third_class" id = "third_class"> Learn </p>
<script>
function removeClass() {
const ele_var = document.querySelectorAll('p');
ele_var.forEach((element) => {
element.classList.remove('second_class','third_class');
});
}
</script>
</body>
</html>
Output
JavaScript can be utilized to eliminate two distinct classes of user interface elements from a webpage.
Example 5
In this section, we will eliminate all the various classes associated with the specific tag names present on the webpage. By utilizing the button click feature, we will remove the existing UI classes from the HTML elements, which include "firstclass," "secondclass," and "third_class."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - add and remove class</title>
<style>
.second_class {
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.first_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.third_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3> How to remove multiple classes in javascript </h3>
<p> Here, we can remove the multiple classes of the web page. </p>
<button onclick="removeClass()">Remove</button>
<div class = "first_class" id = "first_class"> hii </div>
<p class = "second_class" id = "second_class"> hello </p>
<div class = "second_class " id = "second_class "> welcome </div>
<p class = "third_class" id = "third_class"> Learn </p>
<script>
function removeClass() {
const ele_var = document.querySelectorAll('*');
ele_var.forEach((element) => {
element.classList.remove('first_class','second_class','third_class');
});
}
</script>
</body>
</html>
Output
JavaScript can be employed to eliminate two distinct classes of UI elements from a web page.
Example 6
In this section, we will eliminate the redundant classes that share the same name and tag identifiers on the webpage. By utilizing the click button functionality, we will remove the two instances of the "second_class" that are associated with the p tag.
It is possible to eliminate just one class name. This function will not discard the class if multiple class names are applied to the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - add and remove class</title>
<style>
.second_class {
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.first_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
.third_class{
background-color: lightgrey;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
font-size: larger;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3> How to remove multiple classes in javascript </h3>
<p> Here, we can remove the multiple classes of the web page. </p>
<button onclick="removeClass()">Remove</button>
<p class = "second_class first_class" id = "first_class"> hii </p>
<p class = "second_class" id = "second_class"> hello </p>
<p class = "second_class" id = "second_class "> welcome </p>
<p class = "third_class second_class" id = "third_class"> Learn </p>
<script>
function removeClass() {
const ele_var = document.querySelectorAll('*');
ele_var.forEach((element) => {
element.classList.remove('second_class');
});
}
</script>
</body>
</html>
Output
JavaScript can be utilized to eliminate two distinct classes of user interface elements from a webpage.
Conclusion
The straightforward removal technique is designed to eliminate the CSS associated with a specific class. This approach assists both developers and users in verifying the class of the particular web page.