javascript - How can I loop through a new generated array without overwrite it? -

i've been learning code own knowledge isn't technical you'd expect be. having saying that, i'm in project handles images , includes showing information them filelist object user, part of information shown in format: chrysanthemum.jpg (image/jpeg) - 879394 bytes, last modified: 13/7/2009. program allows user delete preselected files before uploading remaining ones, when item deleted group information should go well. i'm not going make go crazy reading +600 lines of code can tackle down problem, therefore i'm giving simple summarized approach of issue is.

in case want deleted first item when function called take peek next code:

<input type='button' id='load' value='load_info' /> <div id='ok'>     <ul id='pic_info'></ul> </div> <div id='message'></div> <input type='button' id='bye' value='bye[0]' />   var files = ["chrysanthemum.jpg (image/jpeg) - 879394 bytes, last modified: 13/7/2009", "desert.jpg (image/jpeg) - 845941 bytes, last modified: 13/7/2009", "hydrangeas.jpg (image/jpeg) - 595284 bytes, last modified: 13/7/2009", "jellyfish.jpg (image/jpeg) - 775702 bytes, last modified: 13/7/2009", "koala.jpg (image/jpeg) - 780831 bytes, last modified: 13/7/2009", "lighthouse.jpg (image/jpeg) - 561276 bytes, last modified: 13/7/2009", "penguins.jpg (image/jpeg) - 777835 bytes, last modified: 13/7/2009"];  var once = 0; var = ''; var d = ''; //someflag = true; //var upd = []; var e; var f = ''; var g = 0;  function load() {     (var = 0; < files.length; i++) {         += "<li>" + files[i] + "</li>";         $("#pic_info").html(a);         e = $("#pic_info li").length;     } }    function delete_item(arr, inx) {     if (e <= 0) {         e = 7;     } else {         e -= 1;     }     //for (var c = 0; c < arr.length; c++) {       //  d += "<li>" + arr[c] + "</li>";         //$("#pic_info").html(d);     //}     arr.splice(inx, 1);     $("#pic_info").html(arr); }  $("#load").click(function () {     if (once == 0) {         load();         once = 1;     } else {         $("#message").html("<strong>files loaded</strong>");     } });  $("#bye").click(function () {     delete_item(files, 0); });  

i haven't been able find effective way rearrange "arr" items in "li" tags, tried loop through them if enable "for loop" happen array it's overwritten new output till reaches last item. i've tried bunch of stuff fix seemingly simple problem , couldn't...... gave , decided people better formation

pd: know there thousand plugins handle files. wanna test learned skills.

here it's fiddle: * jsfiddle

thanks time appreciate , hope have explained myself

i not 100% sure asking, believe asking how delete first li element after loaded files. correct?

if can use jquery selector, in delete item , remove first li not affect files array.

$("li").first().remove();