如何在 JavaScript 中移除类

2025 年 3 月 18 日 | 6 分钟阅读

JavaScript 通过一个简单的方法即可移除单个和多个类。我们可以使用 `querySelector` 配合 `remove()` 方法。`remove` 方法需要 `classList` 关键字来获取多个类。多个类则需要使用 JavaScript 中的“for”循环。

语法

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

语法 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。

移除后的输出

示例 2

在此，我们可以移除 body 标签中具有不同类名的两个类。我们使用点击按钮函数移除带有“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。

移除前的输出

移除后的输出

示例 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。

移除前的输出

移除后的输出

示例 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。

示例 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 从网页中移除两个不同的类 UI。

示例 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 从网页中移除两个不同的类 UI。

结论

简单的移除方法有助于移除类的 CSS。它有助于开发人员和用户验证特定的网页类。

下一主题JavaScript 一元运算符

如何在 JavaScript 中移除类

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何在 JavaScript 中移除类

语法

示例

结论

相关帖子

如何在 javascript 中使用 mouseup 事件

JavaScript FormData

获取和设置元素的滚动位置

JavaScript 一等公民函数

如何将字符串的首字母大写在 JavaScript 中

如何在 JavaScript 中检查两个数组值是否相等

如何计算 JavaScript 中的数字阶乘

JavaScript 中的 NextSibling 属性

JavaScript focusout 事件

JavaScript prepend() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程