How to Remove All li Elements from a ul Element with JavaScript?

To remove all li elements from a ul element with JavaScript, we can set the innerHTML property of the ul element to an empty string.

For instance, if we have:

<ul id='root'>
  <li>foo</li>
  <li>bar</li>
</ul>

Then we write:

document.getElementById("root").innerHTML = "";

to get the ul element with document.getElementById.

Then we get the innerHTML property and set it to an empty string.

Now we should see that the ul element is empty.