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

这是我目前用来从列表中删除项目的代码。我希望用户能够单击要删除的列表中的项目，从视图中删除它，然后从项目数组中删除它。从视图中删除元素工作正常，但由于某种原因，它只删除添加到数组的最后一个元素，而不是单击的实际元素。因此，如果用户创建一个包含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：

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

然后再打电话

itemArray.splice(index,1);

您始终会删除数组的最后一个元素，因为that's how splice works when passed negative numbers：

启动

开始更改数组的索引。如果大于数组的长度，实际的起始索引将设置为数组的长度。如果是否定的，将从最后开始那么多元素。

您需要调试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中元素索引的属性，以便您可以知道要删除的元素而不必依赖{ {1}}和DOM对象。像这个完全未经测试的版本的代码：

indexof()

单击元素并从数组中删除它

1 个答案: