Javascript 单击元素并将其从数组中删除

这是我当前用于从列表中删除项目的代码。我希望用户能够单击列表中要删除的项目，从视图中删除该项目，然后从项目数组中删除该项目。从视图中删除元素可以正常工作，但由于某些原因，它只删除添加到数组中的最后一个元素，而不是单击的实际元素。因此，如果用户创建一个包含Bob、Tom、Rob的列表，然后单击Tom，Tom将不再显示在列表中，但Rob将从数组中删除

这是整个代码块

itemElement.onclick=function(){
        //remove element from view
        this.parentNode.removeChild(this);

        //find the element that was clicked on in the array
        //which should be itemElement(aka this)????
        var index=itemArray.indexOf(this);

        //remove it from the array
        itemArray.splice(index,1);

        //console.log to check
        console.log(itemArray);
    }

const addButton=document.querySelector（“#addButton”）；
const saveButton=document.querySelector（“保存按钮”）；
const itemsSection=document.querySelector（“itemsSection”）；
常量itemArray:Array=[]；
让项目元素；
让newItem:string；
让itemText:string；
//将新项目添加到购物列表
addButton.onclick=函数addItem（）{
//将每个项目添加到列表中
itemElement=document.createElement（“li”）；
newItem=（document.querySelector（#newItem”）.value；
itemText=document.createTextNode（newItem）；
appendChild（itemText）；
itemsSection.appendChild（itemElement）；
document.querySelector（“#newItem”）.value=”“；
//将每个项目推送到阵列以存储在本地存储中
推送（newItem）；
log（itemArray）；
itemElement.onclick=函数deleteItem（）{
var index=itemArray.indexOf（this）；
this.parentNode.removeChild（this）；
拼接（索引，1）；
log（itemArray）；
}
}

---

正如您使用typescript看到的，您的代码在数组中找不到元素：

const addButton =<HTMLButtonElement>document.querySelector("#addButton");
const saveButton = document.querySelector("#saveButton");
const itemsSection = document.querySelector("#itemsSection");
const itemArray: Array<string> = [];

let itemElement;
let newItem: string;
let itemText: string;

//add new item to shopping list
addButton.onclick=function addItem(){

    //add each item to the list
    itemElement = document.createElement("li");
    newItem = (<HTMLInputElement>document.querySelector("#newItem")).value;
    itemText = document.createTextNode(newItem);
    itemElement.appendChild(itemText);
    itemsSection.appendChild(itemElement);
    document.querySelector("#newItem").value="";

    //push each item to our array to store in local storage
    itemArray.push(newItem);
    console.log(itemArray);

    itemElement.onclick=function deleteItem(){
        var index=itemArray.indexOf(this);
        this.parentNode.removeChild(this);

        itemArray.splice(index,1);

        console.log(itemArray);
    }

}

这是将索引设置为-1，因为：

indexOf（）方法返回数组中可以找到给定元素的第一个索引，如果该元素不存在，则返回-1

你什么时候打电话来

index=itemArray.indexOf(this);

您总是删除数组的最后一个元素，因为：

开始

开始更改数组的索引。如果大于数组的长度，则实际起始索引将设置为数组的长度。如果是负数，那么许多元素都将从末尾开始

您需要调试为什么

itemArray.indexOf（this）

找不到该项（我们需要查看更多代码来帮助您），您应该说：

itemArray.splice(index,1);

尝试更改：

if(index >=0)
    itemArray.splice(index,1);
else
    console.log("Could not find index"); // or better error handling ;-)

致：

如果不起作用，请尝试向

itemElement

添加一个属性，该属性包含

itemArray

中元素的索引，这样您就可以知道要删除哪个元素，而不必依赖

indexof（）

和DOM对象。类似于此完全未经测试的代码版本：

//push each item to our array to store in local storage
itemArray.push(itemElement);

const addButton=document.querySelector（“#addButton”）；
const saveButton=document.querySelector（“保存按钮”）；
const itemsSection=document.querySelector（“itemsSection”）；
常量itemArray:Array=[]；
让项目元素；
让newItem:string；
让itemText:string；
//将新项目添加到购物列表
addButton.onclick=函数addItem（）{
//将每个项目添加到列表中
itemElement=document.createElement（“li”）；
newItem=（document.querySelector（#newItem”）.value；
itemText=document.createTextNode（newItem）；
appendChild（itemText）；
itemsSection.appendChild（itemElement）；
document.querySelector（“#newItem”）.value=”“；
//***此处**存储元素的索引：
itemElement.id=“itemIndex”+（itemArray.push（newItem）-1）；
log（itemArray）；
itemElement.onclick=函数deleteItem（）{
//从我的ID而不是indexOf获取我的索引：
var index=parseInt（这个.id.split（“”）[1]）；
this.parentNode.removeChild（this）；
拼接（索引，1）；
log（itemArray）；
}
}

是的，我知道旧版本的IE不支持indexOf，但我不想支持那些浏览器（如果你可以这样称呼他们的话，哈哈）这将返回-1，这将最终从数组中删除最后一个元素index的值是什么？

//push each item to our array to store in local storage
itemArray.push(itemElement);

const addButton =<HTMLButtonElement>document.querySelector("#addButton");
const saveButton = document.querySelector("#saveButton");
const itemsSection = document.querySelector("#itemsSection");
const itemArray: Array<string> = [];

let itemElement;
let newItem: string;
let itemText: string;

//add new item to shopping list
addButton.onclick=function addItem(){

    //add each item to the list
    itemElement = document.createElement("li");
    newItem = (<HTMLInputElement>document.querySelector("#newItem")).value;
    itemText = document.createTextNode(newItem);
    itemElement.appendChild(itemText);
    itemsSection.appendChild(itemElement);
    document.querySelector("#newItem").value="";

    // ***here** store the index of the element:
    itemElement.id = "itemIndex_" + (itemArray.push(newItem) -1);
    console.log(itemArray);

    itemElement.onclick=function deleteItem(){
        // get my index from my ID rather than indexOf:
        var index=parseInt(this.id.split('_')[1]);
        this.parentNode.removeChild(this);

        itemArray.splice(index,1);

        console.log(itemArray);
    }

}