【js】removeClassを使って指定した要素にクラス名を削除する

removeClassは指定しclass名を削除する時に使います。
HTMLにはCSSを記述しておき、アクション（ボタンをクリックした時とか）後に削除するイメージです。
クリック後に形を変えたい、色を変えたい場合に使う事ができます。

removeClassを使った動きのイメージ動画

class名で青色を設定しておき、ボタンをクリックするとclass名が削除され、元々設定していた背景色「オレンジ」が現れる様に設定します。

HTML一式

HTMLソースとなります。
ボタンをクリックするとliにclass名を追加する様にする為、デフォルトでは何も入っていない状態になります。

<div class="container">
	<ul>
		<li class="blue">1</li>
		<li class="blue">2</li>
		<li class="blue">3</li>
		<li class="blue">4</li>
		<li class="blue">5</li>
	</ul>
	<div class="button">CLICK</div>
</div>

CSS一式

CSSソース一覧になります。
全てのCSSを入れていますが、flexやボタンなどは任意なので説明は必須部分だけにさせていただいます。

説明は後ほど。

/*---------------------------
bodyのCSS
---------------------------*/
body {
  position: relative;
  height: 100vh;
  margin: 0;
  background-color: #d0e6ec;
}

/*---------------------------
containerのCSS
---------------------------*/
.container{
  position: absolute;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
  text-align: center;
}

/*---------------------------
ulのCSS
---------------------------*/
ul{
  display: flex;
  margin: 0;
  padding: 0;
}

/*---------------------------
liのCSS　※必須なのはこれ！
---------------------------*/
li{
  position: relative;
  list-style: none;
  width:200px;
  height:200px;
  background-color:#f79c00;
  font-size: 5em;
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

li:last-child{
  margin-right: 0;
}

.blue {
	background-color:#1688af;
}

/*---------------------------
ボタンのCSS
---------------------------*/
.button{
  display: inline-block;
  text-align: center;
  width: 150px;
  margin: 40px auto 0;
  border: 2px solid #999;
  background-color: #fff;
  padding: 10px 0;
  border-radius: 10px;
  color: #999;
  font-weight: bold;
}

.button:hover{
  cursor: pointer;
  border: 2px solid #999;
  background-color: #999;
  color: #fff;
}

js一式

jsソース一覧になります。
説明は後ほど。

$(function() {
  $(".button").click(function(){
  	$("li").removeClass("blue");
  });
});

CSSの説明

今回はクリックすると背景色が切り替わるので、必須なのはliの背景のみになります。あとはレイアウト上設定しているだけです。
本当に必須な部分を抜粋すると以下になります。

li{
	background-color:#f79c00;
}

.blue {
	background-color:#1688af;
}

デフォルトではliに何も入っていない状態。
ボタンをクリックすると「.blue」が追加され、liに設定している色（オレンジ）が青（.blue）になる様に背景色を設定しておきます。

jsの説明

※jquery動作確認（埋め込み及びCDN設置）必須です。

$(function() {
  $(".button").click(function(){
  	$("li").removeClass("blue");
  });
});

jsの動きはこれだけになります。

$(".button").click(function(){

クラス名「button」をクリックしたら

$("li").removeClass("blue");

liのクラス名「blue」を削除。

まとめ

removeClassは一方通行のメソッドなので、変化を戻す必要が無い場合のみ使用します。
行き来したい場合はtoggleClassを使う事で追加したり消したりする事もできます。