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

示範