單擊一個元素並將其從數組中刪除

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

}

如您所見，即時通訊使用打字稿

Answer 1

您的代碼無法在數組中找到元素：

index=itemArray.indexOf(this);

因為找不到該項目，所以將index設置為-1：

indexOf（）方法返回可以在數組中找到給定元素的第一個索引；如果不存在，則返回-1。

當您再致電時

itemArray.splice(index,1);

您總是要刪除數組的最后一個元素，因為這是傳遞負數時拼接的工作方式 ：

開始

開始更改數組的索引。 如果大於數組的長度，則實際的起始索引將設置為數組的長度。 如果為負，則將從頭開始那么多元素。

您需要調試為什么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);
    }

}