尝试从数组中删除元素并使数组在Javascript中的网页上“刷新”

Question

Javascript newbie here. I made an javascript application that adds and removes item elements from a list array. The add functions. The delete doesn't function. I think maybe the item elements are being deleted from the array, however; the array isn't being "refreshed" on the webpage. Anybody know how to make it work? Thanks, Eliza

HTML:

<p>GROCERY LIST-INATOR</p>
<p>Click the button to add an item to grocery list.</p>

<button onclick="addItem()">Add item</button>
<button onclick="deleteItem()">Delete item</button>

<p id="list"></p>

JS:

var list = [];

function addItem (){
    var name = prompt("Enter item name:");
    list.push(name);
    var today = Date();
    var string = "Created on " + today + "<br>" + " My Grocery List: <br>";
    for (var key in list){
        string += "- " + list[key] + "<br>";
    }
    document.getElementById("list").innerHTML = string;
};

function deleteItem (){
    var item = prompt("Enter item name:");
    for(var i = list.length - 1; i >= 0; i--) {
        if(list[i] === item) {
        list.splice(i, 1);
    }
}
   document.getElementById("list").innerHTML = string;
};

http://jsfiddle.net/elizaway/9d0376t1/

Answer 1

You are not updating string variable in your second function. Try add you string related code in second function before use string variable and you are done..

var string = "Created on " + today + "<br>" + " My Grocery List: <br>"; 
for (var key in list)
  { 
    string += "- " + list[key] + "<br>"; 
   }

Above code come between for loop and this code.

document.getElementById("list").innerHTML = string;