Run results for: Jquery remove() VS element.removeChild()

Run details:

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: Chrome 128

Operating system: Windows

Device Platform: Desktop

Date tested: 2 months ago

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

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]); }

Run results for: Jquery remove() VS element.removeChild()

Jquery remove VS removeChild

Jquery remove

removeChild