title: remove all <li> from <ul>?
body: <p>I am appending <code>li</code> in a <code>ul</code> using the following code:</p>
  
  <pre><code>for (var i = 1; i &lt;= len; i++) {
      li = document.createElement('li');
  
      element = document.createElement("img");
      element.setAttribute("src", path[i]);
  
      li.appendChild(element);
      root.appendChild(li);
  }
  </code></pre>
  
  <p>Now, I want to remove all items from the list on a button click.  This is what I am using, which isn't working:</p>
  
  <pre><code>while(root.hasChildNodes()){
      root.removeChild('li');
  } 
  </code></pre>
  
  <p>The condition is true but the inner line <code>root.removeChild('li')</code> doesn't work.  I also tried these options:</p>
  
  <pre><code>root.removeChild(root li);
  root.removeChild('#listid li');
  root.removeChild('ul li');
  ...
  </code></pre>