Question

我有一个包含项目对象的项目数组。我想创建一个函数，当我点击某个项目时，它将从数组中删除。我知道我需要使用像splice这样的东西，我已经实现了以下解决方案，但它确实可以工作。

谁能告诉我我做错了什么。

function updateView() {


for (var i = 0; i < storeItems.length; i++) {
    output += "<a href='#' id='itemTitle' onclick='removeRecord(" + i + ");'>" 
    + storeItems[i].title + " " + "\n" + "</a>";

   }

function removeRecord(i) {

    storeItems.splice(i, 1);
    var newItem = "";

    // re-display the records from storeItems.

    for (var i = 0; i < storeItems.length; i++) {
        newItem += "<a href='#' onclick='removeRecord(" + i + ");'>X</a> " 
        + storeItems[i] + " <br>";
    };
    document.getElementById('foods').innerHTML = newItem;
}

我认为这个错误在下面一行：

output  +=  "<a href='#' id='itemTitle' onclick='removeRecord(" + i + ");'>" +  storeItems[i].title + " " + "\n" + "</a>";

因为它无法识别＆＃34; onclick＆＃34;即使我尝试使用简单的警报进行测试，也会发生事件。

谁能告诉我我做错了什么。如果您认为需要更多信息来回答这个问题，请告诉我。

提前谢谢。

Answer 1

尝试......

storeItems = storeItems.splice(i, 1);

错误：基本上，您必须将拼接数组分配给某些内容。

<强> UODATE ：

以下是我的方式......在 jsFiddle 中测试：

var storeItems = [{
    title: "Dog"
}, {
    title: "Cat"
}, {
    title: "Bird"
}];

var foods = document.getElementById('foods');
foods.addEventListener('click', function(e) {
    var index = e.target.getAttribute('value');
    storeItems.splice(index, 1);

    // re-display the records from storeItems.
    updateView();
});

function updateView() {
    var output = "";
    for (var i = 0; i < storeItems.length; i++) {
        output += "<a href='#' class='item' value='" + i + "'>" + storeItems[i].title + " " + "\n" + "</a>";

    }
    document.getElementById('foods').innerHTML = output;
}


updateView();

HTML：

<div id='foods'></div>

这有效地将onclick事件从锚标记中取出（此时你可以将它们放在任何类型的标记上）并且我还在Listener中重用了你的updateView代码，这样它只需要在一个位置维护。

从onxlick中删除数组中的对象

1 个答案: