jQuery .remove vs .hide vs .detach vs .empty vs .addClass

JavaScript performance comparison

Revision 33 of this test case created by Schalk Neethling

Preparation code

<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>
    

Preparation code output

<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

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
.remove()
$('#remove-me').remove();
pending…
.hide()
$('#hide-me').hide();
pending…
.detach()
$('#hide-remove-me').detach();
pending…
.empty()
$('#empty-me').empty();
pending…
.addClass()
$('#add-class-to-me').addClass('hide');
pending…

Compare results of other browsers

Revisions

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

0 Comments

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.

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.