Benchmark: Jquery remove() VS element.removeChild()

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div id="wrap">
  <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div>
  <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div>
  <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div>
  <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div>
  <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div>
</div>

Tests:

Jquery remove
var elem = $( "#wrap .list-item" ); elem.remove();
removeChild
var elem = document.querySelectorAll('#wrap .list-item'); for( var i = 0; i < elem.length; i++ ){ elem[i].parentNode.removeChild(elem[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Jquery remove
removeChild

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Jquery remove	435455.7 Ops/sec
removeChild	1204629.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The website `MeasureThat.net` provides a JSON representation of the benchmark definition, which includes:

1. **Name**: A unique name for the benchmark.
2. **Individual Test Cases**: Two test cases are defined:
	* "Jquery remove": Uses jQuery to select an element and then removes it using the `.remove()` method.
	* "removeChild": Directly selects all elements with the class `list-item` inside the element with the ID `wrap`, and then removes each of them from their parent node using `parentNode.removeChild()`.
3. **Latest Benchmark Result**: The latest execution results for both test cases, including:
	* Browser version (Chrome 128)
	* Device platform (Desktop)
	* Operating system (Windows)
	* Number of executions per second (`ExecutionsPerSecond`)

**Individual Test Cases**

The two individual test cases are:

1. **"Jquery remove"`:
```javascript
var elem = $( "#wrap .list-item" ); elem.remove();
```
This test case uses jQuery to select the element with the ID `wrap` and class `list-item`, and then removes it.

2. **"removeChild"`:
```javascript
var elem = document.querySelectorAll('#wrap .list-item');
for ( var i = 0; i < elem.length; i++ ) {
  elem[i].parentNode.removeChild(elem[i]);
}
```
This test case uses `document.querySelectorAll` to select all elements with the class `list-item` inside the element with the ID `wrap`, and then removes each of them using `parentNode.removeChild()`.

**Comparison**

The benchmark result shows that, in this specific scenario, the `removeChild` method is faster than the jQuery `.remove()` method. The exact difference depends on the browser version and device platform, but it's generally slower for the jQuery approach due to the overhead of JavaScript and DOM manipulation.

It's essential to note that this benchmark might not be representative of all use cases, as the specific element structure and selection methods used can affect performance.

Related benchmarks:

Jquery remove() VS element.removeChild() (version: 0)

Jquery remove VS removeChild

Comparing performance of: Jquery remove vs removeChild

Created: 4 years ago by: Guest

Jump to the latest result

Jquery remove

removeChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):