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

Revision 23 of this benchmark created by Don on

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/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>
<script>
  function init() {
    // The magic init() function will be executed once before every test
    // Still not perfect, but definitely better
    $('<div id="remove-me" />').appendTo('body');
    $('#hide-me').show();
    if (window.$detached != null) {
      window.$detached.appendTo('body');
    }
  }
</script>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
.remove()
window.$removed = $remove.remove();
ready
.hide()
window.$hidden = $hide.hide();
ready
.detach()
window.$detached = $detach.detach();
ready
style.display
hide.style.display = 'none';
ready
.css('display','none')
window.$detached = $detach.css('display', 'none');
ready

Revisions

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