removing classes

Benchmark created on

Preparation HTML

<div class="parent">
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<div></div>
<div></div>
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<div></div>
<div></div>
<span></span>
<span></span>
<div></div>
<span></span>
<div></div>
<span></span>
<div></div>
<div></div>
<span></span>
<div></div>
<span></span>
<div></div>
<span></span>
<span></span>
<div></div>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div></div>
<div></div>
<span></span>
<span></span>
<span></span>
<div></div>
<div></div>
<div></div>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<div></div>
<div></div>
<span></span>
<span></span>
<div></div>
<div></div>
<div></div>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<div></div>
<div></div>
<div></div>
<span></span>
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<span></span>
<div></div>
<span></span>
<span></span>
<div></div>
<div></div>
<span></span>
<span></span>
<div></div>
<span></span>
</div>

Setup


let options = [...document.querySelector('.parent').children]

Test runner

Ready to run.

Testing in
TestOps/sec
remove
options.forEach(e => {
	if (e.tagName = 'SPAN') e.className = 'hidden'
})
	
options.forEach(e => e.classList.remove('hidden'))
ready
conditional remove
options.forEach(e => {
	if (e.tagName = 'SPAN') e.className = 'hidden'
})
	
options.forEach(e => {
	if (e.className == 'hidden') e.classList.remove('hidden')
})
ready
toggle off
options.forEach(e => {
	if (e.tagName = 'SPAN') e.className = 'hidden'
})
	
options.forEach(e => e.classList.toggle('hidden', false))
ready
conditional toggle off
options.forEach(e => {
	if (e.tagName = 'SPAN') e.className = 'hidden'
})
	
options.forEach(e => {
	if (e.className == 'hidden') e.classList.toggle('hidden', false)
})
ready
empty className
options.forEach(e => {
	if (e.tagName = 'SPAN') e.className = 'hidden'
})
	
options.forEach(e => e.className = '')
ready
conditional empty className
options.forEach(e => {
	if (e.tagName = 'SPAN') e.className = 'hidden'
})
	
options.forEach(e => {
	if (e.className == 'hidden') e.className = ''
})
ready

Revisions

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