remove all <li> from <ul>?

If you are using jQuery, why don't you use it's benefits?

adding <li> elements:

$("<li><img src='"+path[i]+"'></li>").appendTo(root);

removing all <li> elements:

$(root).empty();

deleting one <li> element:

$("li:eq(3)",$(root)).remove();

and if you are using raw js, you can use:

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

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

You appear to be trying this with raw JavaScript:

while( root.firstChild ){
  root.removeChild( root.firstChild );
}

jQuery will only slow you down here.