remove all <li> from <ul>?

I am appending li in a ul using the following code:

for (var i = 1; i <= len; i++) {
    li = document.createElement('li');

    element = document.createElement("img");
    element.setAttribute("src", path[i]);

    li.appendChild(element);
    root.appendChild(li);
}

Now, I want to remove all items from the list on a button click. This is what I am using, which isn't working:

while(root.hasChildNodes()){
    root.removeChild('li');
} 

The condition is true but the inner line root.removeChild('li') doesn't work. I also tried these options:

root.removeChild(root li);
root.removeChild('#listid li');
root.removeChild('ul li');
...