.removeClass()

类别：特性 | 文档处理 > 类特性 | CSS

.removeClass( [className ] )返回类型：jQuery

描述：从匹配的元素集合中每个元素上删除一个类、多个类或者所有类。

如果包含了一个类名作为参数，则只会从匹配的元素集合中删除那个类。如果参数中没有指定类名，则所有的类都会被删除。

在jQuery v1.12/2.2之前，.removeClass()方法操纵选中元素的className属性，而不是class特性。一旦属性改变时，浏览器将相应地更新特性。这意味着当class特性被更新时，旧的类名被删除时，浏览器可能把特性的值设置为空字符串，而不是彻底地删除该特性。此行为的一个暗含意思是此方法只对带有HTML DOM语义的文档起作用（例如，不是纯XML文档）。

自从jQuery 1.22/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>的类名。

示例：

从匹配的元素上删除类“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.jquery.com/jquery-1.10.2.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.jquery.com/jquery-1.10.2.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>

演示：

从匹配的元素上删除所有的类。

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.jquery.com/jquery-1.10.2.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>

演示：