Delete HTML Nodes

Benchmark created on

Preparation HTML

<ul id="list_a">
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>List Item 4</li>
	<li>List Item 5</li>
	<li>List Item 6</li>
	<li>List Item 7</li>
	<li>List Item 8</li>
	<li>List Item 9</li>
	<li>List Item 10</li>
	<li>List Item 11</li>
	<li>List Item 12</li>
	<li>List Item 13</li>
	<li>List Item 14</li>
	<li>List Item 15</li>
	<li>List Item 16</li>
	<li>List Item 17</li>
	<li>List Item 18</li>
	<li>List Item 19</li>
	<li>List Item 20</li>
	<li>List Item 21</li>
	<li>List Item 22</li>
	<li>List Item 23</li>
	<li>List Item 24</li>
	<li>List Item 25</li>
	<li>List Item 26</li>
	<li>List Item 27</li>
	<li>List Item 28</li>
	<li>List Item 29</li>
	<li>List Item 30</li>
	<li>List Item 31</li>
	<li>List Item 32</li>
	<li>List Item 33</li>
	<li>List Item 34</li>
	<li>List Item 35</li>
	<li>List Item 36</li>
	<li>List Item 37</li>
	<li>List Item 38</li>
	<li>List Item 39</li>
	<li>List Item 40</li>
	<li>List Item 41</li>
	<li>List Item 42</li>
	<li>List Item 43</li>
	<li>List Item 44</li>
	<li>List Item 45</li>
	<li>List Item 46</li>
	<li>List Item 47</li>
	<li>List Item 48</li>
	<li>List Item 49</li>
	<li>List Item 50</li>
</ul>

Setup

const ula = document.getElementById('list_a');
let nodes = [...ula.querySelectorAll('li')];

const range = document.createRange();

Test runner

Ready to run.

Testing in
TestOps/sec
for loop
for (let i = nodes.length - 1; i > 0; i--) {
	nodes[i].remove()
	nodes.pop()
}
ready
range
range.selectNodeContents(ula)
range.deleteContents();
// nodes = []
ready
while loop
let i = nodes.length;

while(i--) {
	ula.removeChild(ula.lastChild);
	nodes.pop();
}
ready

Revisions

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