JavaScript 如何移除类

JavaScript使用简单的方法来移除单个和多个类。我们可以使用querySelector和remove()方法来移除类。remove方法需要使用classList关键字获取多个类。多个类在JavaScript中使用”for”循环。

语法

移除类的语法用于单个和多个类的元素。

语法1：

以下语法用于移除网页中的单个类。

const ele_var = document.querySelectorAll('p');
element.classList.remove('first_class', 'second_class');

语法2:

以下语法用于移除网页的多个类。

const ele_var = document.querySelectorAll('p');
ele_var.forEach((element) => {
element.classList.remove('first_class', 'second_class');
});

解释

“for循环”是多个类操作功能所必需的。
“classList.remove(class_names)” 方法用于从网页中移除单个或多个类的UI。

示例

以下示例使用javascript的remove()方法来移除单个和多个类的UI。

示例1

在这个示例中，我们可以使用点击按钮函数，从网页中的具有相同标签名称的不同同名类中删除单个类。我们使用p标签删除了”second_class”名称类。

<!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>

输出

使用Javascript从网页中删除的一个类UI。

JavaScript 如何移除类

删除输出后

JavaScript 如何移除类

示例2

这里，我们可以通过点击按钮函数，将标签中的两个具有不同类名的类移除。我们移除了”first_class”和”second_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;
}
</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>

输出

使用JavaScript从网页中删除一个类UI。

在删除输出之前

JavaScript 如何移除类

移除输出后

JavaScript 如何移除类

示例3

在这里，我们可以移除网页上具有相同标签名的多个同名类。使用点击按钮函数，我们移除了具有p标签的两个名为”second_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;
}
</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>

输出

使用javascript从网页中移除两种不同的UI类。

在移除之前的输出

JavaScript 如何移除类

删除输出后

JavaScript 如何移除类

示例4

在这里，我们可以删除网页上不同标签名称的多个类。使用点击按钮函数，我们删除了p和div标签的”second_class”和”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('p');
ele_var.forEach((element) => {
element.classList.remove('second_class','third_class');
});
}
</script>
</body>
</html>

输出

使用javascript从网页中移除了两个不同的UI类。

JavaScript 如何移除类

示例5

在这里，我们可以删除网页上所有不同类别的标签。使用点击按钮功能，我们可以删除html标签中可用的类别UI，例如“first_class”，“second_class”和“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>

输出

使用JavaScript从网页中移除了两个不同类别的用户界面。

JavaScript 如何移除类

示例6

在这里，我们可以删除网页上具有相同标签名称的多个同名类。使用点击按钮功能，我们删除了p标签下的两个“second_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>
<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>

输出

使用 JavaScript 从网页中移除了两种不同类别的用户界面。

JavaScript 如何移除类