.removeClass()【クラス削除】

メモ

  • 指定したクラスの削除
    • 置換の場合、.addClass()【クラス追加】と組み合わせ
    • 複数クラスの指定が可能
    • クラス名の省略で全クラス削除
    • class 属性を使用の為、HTML DOM・XMLドキュメント(SVGドキュメントを含む) が利用可能 1.12 / 2.2
      (旧バージョンは className プロパティを使用の為、XMLドキュメントは利用不可)

構文

説明構文戻り値
クラス削除 .removeClass( [className ] ) 1.0

String className:クラス名 (複数:スペース区切り / 省略:全クラス削除)
jQuery
.removeClass( function ) 1.4

function( [ index [ , currentClassName ] ] )
引数説明
Integer indexインデックス (0~)
String classNameクラス名
(this)処理中DOM要素
戻り値説明
String削除するクラス名 (複数:スペース区切り)
jQuery

関連

<style>
.bgcolor1 { background-color:lightyellow; }
.bgcolor2 { background-color:lightgray; }
.bgcolor3 { background-color:lightgreen; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
</style>

<div id="id1">
  <ul>
  <li class="bgcolor1">bgcolor1
  <li class="bgcolor2">bgcolor2
  <li class="bgcolor3">bgcolor3
  <li class="bgcolor1 bold">bgcolor1 bold
  <li class="bgcolor2 bold">bgcolor2 bold
  <li class="bgcolor3 bold">bgcolor3 bold
  <li class="bgcolor1 bold italic">bgcolor1 bold italic
  <li class="bgcolor2 bold italic">bgcolor2 bold italic
  <li class="bgcolor3 bold italic" id="id9">bgcolor3 bold italic
  </ul>
</div>

<script>
$( "#id1 .bgcolor1" ).removeClass("bgcolor1").append(" (削除:bgcolor1)");
$( "#id9" ).removeClass("bold italic").append(" (削除:bold italic)");
$( "#id1 li" ).removeClass( function(index, currentClassName) {
  var className;
  switch (index % 2) {
  case 0:
    className = "bold";
    break;
  case 1:
    className = "italic";
    break;
  }
  $( this ).append(" [" + index + ":" + currentClassName + " 削除:" + className + "]");
  return className;
});
</script>
  • bgcolor1
  • bgcolor2
  • bgcolor3
  • bgcolor1 bold
  • bgcolor2 bold
  • bgcolor3 bold
  • bgcolor1 bold italic
  • bgcolor2 bold italic
  • bgcolor3 bold italic