javascript - 单击一个元素并将其从数组中删除

Question

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

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

这是整个代码块

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

}

如你所见，我正在使用 typescript

Answer 1

您的代码无法在数组中找到元素:

index=itemArray.indexOf(this);

这是将 index 设置为 -1 因为 the item is not found :

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

当你调用

itemArray.splice(index,1);

你总是要删除数组的最后一个元素，因为 that's how splice works when passed negative numbers :

start

Index at which to start changing the array. If greater than the length of the array, actual starting index will be set to the length of the array. If negative, will begin that many elements from the end.

您需要调试为什么 itemArray.indexOf(this); 找不到该项目(我们需要查看更多代码来帮助您)，您应该说:

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

尝试改变:

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

到:

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

如果这不起作用，请尝试向 itemElement 添加一个属性，其中包含 itemArray 中元素的索引，这样您就可以知道要删除哪个元素而无需依赖 indexof() 和 DOM 对象。像这样完全未经测试的代码版本:

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

}