jQuery removeClass() メソッド：使いこなし術
2024-04-02
jQueryで複数のクラスを削除する
removeClass() メソッド
removeClass() メソッドは、要素から指定されたクラスを削除します。
例：
<p class="red big">これは赤い大きな文字です</p>
$( "p" ).removeClass( "red big" );
上記のコードは、p 要素から red と big クラスを削除します。
複数のクラスを削除するには、スペースで区切って指定します。
<p class="red green blue">これは赤緑青の文字です</p>
$( "p" ).removeClass( "red green blue" );
attr() メソッド
attr() メソッドは、要素の属性を取得または設定します。
クラス属性を空文字列に設定することで、すべてのクラスを削除できます。
<p class="red big">これは赤い大きな文字です</p>
$( "p" ).attr( "class", "" );
特定のクラスのみを削除するには、正規表現を使用できます。
<p class="red green blue">これは赤緑青の文字です</p>
$( "p" ).attr( "class", function( i, val ) {
return val.replace( /red|green/g, "" );
});
addClass() メソッド
すでに存在するクラスは追加されないため、このメソッドを使用して間接的にクラスを削除できます。
<p class="red big">これは赤い大きな文字です</p>
$( "p" ).addClass( "small" );
big クラスはすでに存在するため、追加されません。
jQueryで複数のクラスを削除するには、いくつかの方法があります。
それぞれの方法にはメリットとデメリットがありますので、状況に合わせて使い分けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryで複数のクラスを削除する</title>
</head>
<body>
<p class="red big">これは赤い大きな文字です</p>
<p class="green small">これは緑色の小さな文字です</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 1. `removeClass()` メソッド
$( "p.red" ).removeClass( "big" ); // 赤い文字から "big" クラスを削除
// 2. `attr()` メソッド
$( "p.green" ).attr( "class", "" ); // 緑色の文字からすべてのクラスを削除
// 3. `addClass()` メソッド
$( "p" ).addClass( "important" ); // すべての要素に "important" クラスを追加
// 4. `each()` メソッド
$( "p" ).each(function() {
var classes = $( this ).attr( "class" ).split( " " );
var newClasses = [];
for ( var i = 0; i < classes.length; i++ ) {
if ( classes[i] !== "red" && classes[i] !== "green" ) {
newClasses.push( classes[i] );
}
}
$( this ).attr( "class", newClasses.join( " " ) );
}); // 赤い文字と緑色の文字から "red" と "green" クラスを削除
</script>
</body>
</html>
- 赤い文字は "big" クラスが削除され、"red" クラスのみになります。
- 緑色の文字はすべてのクラスが削除され、何もクラスがなくなります。
- すべての要素に "important" クラスが追加されます。
- 赤い文字と緑色の文字から "red" と "green" クラスが削除されます。
jQueryで複数のクラスを削除する他の方法
filter() メソッド
filter() メソッドは、条件に合致する要素のみを抽出します。
クラス名に基づいて要素を抽出することで、特定のクラスのみを削除できます。
<p class="red big">これは赤い大きな文字です</p>
<p class="green small">これは緑色の小さな文字です</p>
$( "p" ).filter( ".red" ).removeClass( "big" ); // 赤い文字から "big" クラスを削除
上記のコードは、red クラスを持つ p 要素のみを抽出 and "big" クラスを削除します。
children() メソッド
children() メソッドは、要素の直接の子要素を取得します。
子要素のクラスを削除することで、親要素のクラスを間接的に削除できます。
<div class="container">
<p class="red big">これは赤い大きな文字です</p>
<p class="green small">これは緑色の小さな文字です</p>
</div>
$( ".container" ).children( ".red" ).removeClass( "big" ); // 赤い文字から "big" クラスを削除
siblings() メソッド
<div class="container">
<p class="red big">これは赤い大きな文字です</p>
<p class="green small">これは緑色の小さな文字です</p>
</div>
$( ".container" ).children( ".red" ).siblings().removeClass( "small" ); // 緑色の文字から "small" クラスを削除
jquery css
