ywork2020.com

Title

リムーブクラスメソッドを使えば、セレクターのclass属性を削除できる

removeClassメソッドの概要

jQueryのremoveClassメソッドを使うと、セレクターに指定したHTML要素やid属性のターゲットからclass属性を削除することができます。

実機サンプル

答え: id="idAnswer" class="clsTestClass"
innerText

実行: ボタンをクリックすると答えを表示している要素からclass属性を削除します。

サンプルコード

<head>
	<meta charset="utf-8">
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
		.clsTestClass{border: solid 2px #000;}
	</style>
</head>
<body>
	<p id="idAnswer" class="clsTestClass">innerText</p>
	<script>
		$("#idAnswer").removeClass("clsTestClass");
	</script>
</body>
サンプルコードではボダンがクリックされた時の処理は、混乱を避ける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

サンプルコードの要点

  1. 答えを表示しているP要素にid属性="idAnswer"の識別子を設定しています。
  2. jQueryのターゲットセレクターにidAnswerを指定しています。
  3. ターゲットのclass属性からremoveClassメソッドを使って"clsTestClass"を削除しています。
  4. サンプルでは「removeClass(引数)」としているが、引数を空にして「removeClass()」としても構いません。

removeClassメソッドの補足

このメソッドに類似した他のメソッドが存在しますので、必要があれば関連リンクを参照してください。