脱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が対応していないのでループをまわした書き方にした。