jQuery .remove vs .hide vs .detach vs .empty vs .addClass (v33)

Revision 33 of this benchmark created by Schalk Neethling on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style type="text/css">
.hide {
    display: none;
}
</style>

<div id="remove-me"></div>
<div id="hide-me"></div>
<div id="add-class-to-me"></div>
<div id="detach-me"></div>
<div id="empty-me">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ut est nec porta. Vestibulum in convallis mi, a sagittis odio. Duis leo magna, vestibulum ac libero et, posuere sagittis dolor. Sed tempus convallis nunc sed tincidunt. Praesent condimentum, sem ut euismod sagittis, leo turpis ullamcorper est, at tincidunt massa erat eget augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi odio, consequat quis ante sed, condimentum pretium mi. Curabitur pretium mi at metus auctor ullamcorper. Vivamus eu eleifend nulla. Nulla accumsan gravida euismod. Pellentesque fringilla sapien neque, vel consequat eros consequat et. In aliquet massa non nisi sagittis consequat. Curabitur lobortis tempor dui, nec sagittis metus feugiat id. Ut rhoncus tortor quis felis bibendum, ac commodo augue molestie. Integer nec erat convallis, egestas justo non, dignissim ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ut est nec porta. Vestibulum in convallis mi, a sagittis odio. Duis leo magna, vestibulum ac libero et, posuere sagittis dolor. Sed tempus convallis nunc sed tincidunt. Praesent condimentum, sem ut euismod sagittis, leo turpis ullamcorper est, at tincidunt massa erat eget augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi odio, consequat quis ante sed, condimentum pretium mi. Curabitur pretium mi at metus auctor ullamcorper. Vivamus eu eleifend nulla. Nulla accumsan gravida euismod. Pellentesque fringilla sapien neque, vel consequat eros consequat et. In aliquet massa non nisi sagittis consequat. Curabitur lobortis tempor dui, nec sagittis metus feugiat id. Ut rhoncus tortor quis felis bibendum, ac commodo augue molestie. Integer nec erat convallis, egestas justo non, dignissim ante.</p>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
.remove()
$('#remove-me').remove();
ready
.hide()
$('#hide-me').hide();
ready
.detach()
$('#hide-remove-me').detach();
ready
.empty()
$('#empty-me').empty();
ready
.addClass()
$('#add-class-to-me').addClass('hide');
ready

Revisions

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