jQuery .remove vs. .hide vs. detach (v27)

Revision 27 of this benchmark created on

Description

Comparing performance of different ways to hide DOM elements, excluding the time required to locate each element.

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
        </script>
        <div id="remove-me">
            confirm removed
        </div>
        <div id="hide-me">
            confirm hidden
        </div>
        <div id="detach-me">
            confirm detatched
        </div>
        <div id="Div1">
            XXXXX
        </div>

Setup

var $detach = $("#detach-me");
    var $remove = $('#remove-me');
    var $hide = $('#hide-me');
    var hide = document.getElementById('hide-me');
    saved = $remove.clone(true);

Test runner

Ready to run.

Testing in
TestOps/sec
.remove()
$remove.remove();
saved.appendTo($('#Div1'));
ready
.hide()
$remove.detach();
saved.appendTo($('#Div1'));
ready
.detach()
 
ready
style.display
 
ready
.css('display','none')
 
ready

Revisions

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