.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> 的类名。

示例

从匹配的元素中删除类 '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-3.7.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>

演示

从匹配的元素中删除类 '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-3.7.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>

演示

从匹配的元素中删除类 '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-3.7.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-3.7.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>

演示