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

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

That is my code I am currently using to delete items from a list. I want the user to be able to click on the item in their list they want to delete, delete it from the view and then delete it from an array of items. Deleting the element from the view is working fine, but for some reason its only deleting the last element added to the array, not the actual element that was clicked on. So if the user makes a list that has Bob,Tom,Rob and then clicks on Tom, Tom is no longer displayed in the list but Rob will be deleted from the array.

Here is that whole block of code

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

}

As you can see im using typescript

Answer 1

Your code is failing to find the element in the array:

index=itemArray.indexOf(this);

This is setting index to -1 because 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.

When you then call

itemArray.splice(index,1);

You're always removing the last element of the array, because 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.

You need to debug why itemArray.indexOf(this); is not finding the item (and we need to see more code to help you with that) and you should say:

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

Try changing:

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

to:

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

If that doesn't work, try adding an attribute to itemElement containing the index of the element in itemArray , so that you can know which element to remove without having to rely on indexof() and DOM objects. Something like this totally untested version of your code:

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

}