jQueryでクラスを削除する

【JavaScript jQuery3.4.1】
何をいまさらとお思いかもしれないですが、jQueryでクラスを削除する方法について少し書きたいと思います。

$("div").removeClass("sample");

はい。divに設定してあるsampleクラスが削除されます。
当たり前な感じの基本形ですね。
では次に、複数のクラスをまとめて消したい場合、

$("div").removeClass("sample1 sample2");

はい。という感じで、sample1とsample2のクラスをまとめて削除できます。
ところが、この方法だとsample3,sample4,sample5....というふうにまとめて消したい場合すべて一つ一つ入れないといけなくなりますよね。
めんどくさいです。では、このクラスの指定がスペース区切りであることを利用してこのように設定してみるのはどうでしょうか。

var sample = Array();
for(var i=1; i<100; ++i) {
    sample[sample.length] = "sample"+i;
}
$("div").removeClass(sample.join(" "));

なるほど。これでとりあえずsample1〜sample100までのクラスが削除できますね。
でも、10001とか設定されていなかったら消せないので困ります。

そこで、removeClassに設定されているコールバック機能を利用してまとめて削除する方法をとってみます。

$("div").removeClass(function(index, classname){
   var ret = Array();
   classname = classname.split(" ");
   for(var i in classname){
       if(classname[i].match(/^sample/)){
           ret[ret.length] = classname[i];
       }
   }
   return ret.join(" ");
});

という感じで、divに指定してあるsampleからはじまるクラスすべてを削除します。
returnで返している内容は、スペース区切りのクラス名のテキストなので、基本的な仕組みはこれまでと同じですね。indexはこの処理が何個目の該当したタグなのか、classnameにはそこに設定してあるクラスがスペース区切りで返ってきているわけですね。

うまく作れば○○からはじまるクラスをすべて消すfunctionも作れそうですね。

それでは
Enjoy jQuery!