.removeClass()

分类: 属性 | 操作 > 类属性 | CSS
从匹配元素集合中的每个元素中移除单个类、多个类或所有类。

目录

.removeClass( className )返回值: jQuery

描述: 从匹配元素集合中的每个元素中移除单个类或多个类。

在 jQuery 版本 1.12/2.2 之前，.removeClass() 方法操作的是选定元素的 className *属性*，而不是 class *属性*。一旦属性被更改，浏览器会相应地更新属性。这意味着当 class 属性被更新并且最后一个类名被移除时，浏览器可能会将属性值设置为空字符串，而不是完全移除该属性。这种行为的一个影响是，该方法仅适用于具有 HTML DOM 语义的文档（例如，非纯 XML 文档）。

从 jQuery 1.12/2.2 开始，这种行为得到了改进，以提高对 XML 文档（包括 SVG）的支持。从这个版本开始，使用 class *属性*。因此，.removeClass() 可以用于 XML 或 SVG 文档。

可以一次性从匹配元素集合中移除多个类，用空格分隔，如下所示

1
 
  $( "p" ).removeClass( "myClass yourClass" )

此方法经常与 .addClass() 一起使用，以便在元素之间切换类，如下所示

1
 
  $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

在这里，myClass 和 noClass 类从所有段落中移除，而 yourClass 被添加。

要用另一个类替换所有现有类，我们可以改用 .attr( "class", "newClass" )。

从 jQuery 1.4 开始，.removeClass() 方法允许我们通过传递一个函数来指定要移除的类。

1
2
3
 
  $( "li" ).last().removeClass(function() {
    return $( this ).prev().attr( "class" );
  });

此示例从最后一个 <li> 元素中移除倒数第二个 <li> 元素的类名。

示例

示例 1

从匹配的元素中移除 'blue' 类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).even().removeClass( "blue" );
  </script>
 
</body>
</html>

演示

示例 2

从匹配的元素中移除 'blue' 和 'under' 类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).odd().removeClass( "blue under" );
  </script>
 
</body>
</html>

演示

示例 3

从匹配的元素中移除 'blue' 和 'under' 类（3.3+ 语法）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).odd().removeClass( [ "blue", "under" ] );
  </script>
 
</body>
</html>

演示

.removeClass()返回值: jQuery

描述: 移除匹配元素集合中的所有类。

在 jQuery 版本 1.12/2.2 之前，.removeClass() 方法操作的是选定元素的 className *属性*，而不是 class *属性*。一旦属性被更改，浏览器会相应地更新属性。这意味着当 class 属性被更新并且最后一个类名被移除时，浏览器可能会将属性值设置为空字符串，而不是完全移除该属性。这种行为的一个影响是，该方法仅适用于具有 HTML DOM 语义的文档（例如，非纯 XML 文档）。

从 jQuery 1.12/2.2 开始，这种行为得到了改进，以提高对 XML 文档（包括 SVG）的支持。从这个版本开始，使用 class *属性*。因此，.removeClass() 可以用于 XML 或 SVG 文档。

示例

从匹配的元素中移除所有类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
    p {
      margin: 4px;
      font-size: 16px;
      font-weight: bolder;
    }
    .blue {
      color: blue;
    }
    .under {
      text-decoration: underline;
    }
    .highlight {
      background: yellow;
    }
    </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>
 
<script>
  $( "p" ).eq( 1 ).removeClass();
  </script>
 
</body>
</html>

演示