removeclass with and without check and regex (v7)

Revision 7 of this benchmark created on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>#test: {visibility: hidden;}</style>
<ul id="list">
</ul>

Setup

var $list = $('li');
  var ul = document.getElementById('list');
  var lis;
  

  Benchmark.prototype.setup = function() {
    ul.innerHTML = '<li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li><li class="test"></li>';
    
    lis = document.getElementsByTagName('li');
    
  };

Test runner

Ready to run.

Testing in
TestOps/sec
With Check
$list.each(function() {
  if ($(this).hasClass('test')) {
    $(this).removeClass('test');
  }
});
ready
Without Check
$list.each(function() {
  $(this).removeClass('test');
});
ready
Regex Replace
$list.each(function() {
  this.className.replace(/\btest\b/, '');
});
ready
Native for loop
for (var i = 0, l = lis.length; i < l; i += 1) {
        var li = lis[i];
        if (li.className === 'test') {
                li.className = '';
        }
}
ready
Native innerhtml
ul.innerHTML = '<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>';
ready
Native regex
for (var i = 0, l = lis.length; i < l; i += 1) {
        lis[i].className.replace(/\btest\b/, '');
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.