Javascript 从数组中删除对象onclick

我有一个包含item对象的item数组。我想创建一个函数，当我单击某个项目时，它将从数组中删除。我知道我需要使用像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;
}

函数updateView（）{
对于（var i=0；i”；
};
document.getElementById（'foods'）.innerHTML=newItem；
}

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

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

output+=”；

因为即使我尝试用一个简单的警报进行测试，它也无法识别“onclick”事件

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

提前谢谢。

试试

storeItems = storeItems.splice(i, 1);

错误：基本上，您必须将拼接阵列分配给某个对象

UODATE：

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();

以下是我的方法…在中测试：

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();

var-storeItems=[{
标题：“狗”
}, {
标题：“猫”
}, {
标题：“鸟”
}];
var foods=document.getElementById（'foods'）；
食品.添加列表器（'click'，函数（e）{
var index=e.target.getAttribute（'value'）；
存储项目.拼接（索引，1）；
//重新显示storeItems中的记录。
updateView（）；
});
函数updateView（）{
var输出=”；
对于（var i=0；i

HTML:

---

这有效地将onclick事件从锚标记中移除（此时，您可以将它们放在任何类型的标记上）我还在监听器中重复使用了你的updateView代码，因此它只需要在一个位置进行维护。

你可以使用任何你喜欢的代码缩进，但是当向其他人寻求帮助时，请有礼貌地花点时间，将代码格式化为一致的、有点标准的格式。像这样的工具可以提供帮助。您好，谢谢回答到此为止。我试过了，但问题是没有调用“onclick”事件侦听器。当我单击该项时，我在控制台中出现以下错误。“removeRecord未定义”在查找remove Recred函数时遇到问题。我的语法是否适合在下面的行中分配o点钟侦听器：output+=“”；完全返工到位…我最初的建议是错误的。谢谢你，这工作做得很好。我只是想问一下，以便我理解这一点，所以你所做的是一个onclick事件侦听器，以了解食品部门中的所有元素？我只想了解你是如何做到的。再次感谢你。你已经完全明白了。一般来说，我更喜欢nce在jQuery中这样做有两个原因。附加侦听器的代码更简单、更直观，我可以附加到更高的元素，但要注意较低元素上的事件……这使得动态创建元素更容易管理。