脱jQuery~JavaScriptに支配されないための真の思考法~ removeClassメソッド
jQueryのremoveClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。
まずは、removeClassメソッドを使って一つクラス名を設定する方法について。
// jQuery $('#hoge').removeClass('foo'); // JavaScript document.querySelector('#hoge').classList.remove('foo'); // jQuery $('.hoge').removeClass('foo'); // JavaScript document.querySelectorAll('.hoge').forEach(function(currentValue){ currentValue.classList.remove('foo'); });
次にremoveClassメソッドを使って複数のクラス名を設定する方法について。
// jQuery $('#hoge').removeClass('foo bar'); // JavaScript 'foo bar'.split(' ').forEach(function(currentValue){ document.querySelector('#hoge').classList.remove(currentValue); }); // jQuery $('.hoge').removeClass('foo bar'); // JavaScript document.querySelectorAll('.hoge').forEach(function(currentElement){ 'foo bar'.split(' ').forEach(function(currentValue){ currentElement.classList.remove(currentValue); }); });
removeメソッドはクラス名を複数設定することができるみたいなのだが、IE11が対応していないのでループをまわした書き方にした。