「jQuery」removeClassメソッドを使ってclassを削除する
環境
jQuery 3.5.1
構文
$(セレクタ).removeClass(クラス);
$(セレクタ).removeClass(クラス1,クラス2);
使用例
<style>
.cftA {
border: 3px solid red;
}
.cftB {
background: skyblue;
}
</style>
<div id="ta">
<div id="tb" class="cftA cftB">test data 12345</div>
</div><br>
<input type="button" class="btnDel" value="削除" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// ボタン「btnDel」を押す
$(".btnDel").click(function () {
//クラスcftBを削除します
$("#tb").removeClass("cftB");
});
</script>
<style>
.cftA {
border: 3px solid red;
}
.cftB {
background: skyblue;
}
</style>
<div id="ta">
<div id="tb" class="cftA cftB">test data 12345</div>
</div><br>
<input type="button" class="btnDel" value="削除" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// ボタン「btnDel」を押す
$(".btnDel").click(function () {
//クラスcftBを削除します
$("#tb").removeClass("cftB");
});
</script>
<style>
.cftA {
border: 3px solid red;
}
.cftB {
background: skyblue;
}
</style>
<div id="ta">
<div id="tb" class="cftA cftB">test data 12345</div>
</div><br>
<input type="button" class="btnDel" value="削除" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// ボタン「btnDel」を押す
$(".btnDel").click(function () {
//クラスcftBを削除します
$("#tb").removeClass("cftB");
});
</script>
動作確認
「削除」ボタンを押すと、クラス「cftB」を削除します