Remove Elemens

JavaScript performance comparison

Test case created by Edward

Preparation code

<div id="data">
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<p>a</p>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<p>b</p>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<p>c</p>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    

Preparation code output

<div id="data"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <p>a</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <p>b</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <p>c</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </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 Via Tree Walker
function removeOtherElements( base, target ) {
  var
    rootElement = document.getElementsByTagName( base )[0],
    dest = target.toUpperCase(),
    walker = document.createTreeWalker( rootElement, NodeFilter.SHOW_ELEMENT, null, false ),
    node = walker.currentNode;

  for( var i = 0; i < node.children.length; i++ ) {
    if( node.children[i].nodeName !== dest ) {
      node.children[i].remove();
    }
  }
}

removeOtherElements( "div", "p" )
pending…
Remove Via Jquery
$("#data").children().not("p").remove();
pending…

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

Compare results of other browsers

0 Comments

a

b

c