CODEWITHSUNDEEP
javascriptarrays
FerJEP
FerJEP

Reputation: 33

Deleting an element from Array (To-Do list app)

I'm creating a To-Do list app, pretty basic and I copied the idea from Youtube (still learning JS). So, each time you add a new To-Do it's stored (just the text you typed and whether it's done or not) in an array and the HTML element is added, everything's good until here.

The problem begins when I try to delete that element from the array. Each item (To-do) has an ID which is basically the index where it's stored in the array, so I coded array.splice(item.id, 1) and It works great if you delete the items patiently one by one, but if you click the delete button faster the items deleted in the array doesn't match, it's like the index passed messes up. I was wondering if I could make like a wait until the current delete() function ends or something like that. Btw the list container has an eventListener and if the delete button of any item was clicked it runs the delete() function passing the item by e.target.parentElement (which is the item container).

I want the array for a localeStorage. Thanks!

First time posting and English isn't my first language, sorry for any mistake.

Upvotes: 2

Views: 1425

Answers (1)

Spencer Stolworthy
Spencer Stolworthy

Reputation: 1430

Great question. So .splice() is indeed the Array method you want to call, but it doesn't quite use the syntax you're expecting.

First of all, I'm going to point you to the MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

MDN is managed by Mozilla, and is an authoritative source on most things javascript-in-the-browser. If you're just getting started with javascript, that resource will be invaluable. The MDN documentation is some of the best written technical documentation out there, and is largely written so that people with minimal experience in the language can understand them.

That being said, let's go over what Array.splice is actually doing.

So you have an array of todos:

const todos = [] // Array of to-dos

You want to delete one of the the todos, and you have access to the id. I'm going to assume your Todos have a shape similar to this:

const todo = {
 id: 1 // number
 name: 'my todo' // string
 description: 'my todo description' // string
}

In order to delete an element from this array, given the id of the item you're deleting, you would actually need to do the following:

1) Find the location in the array of the todo that has the id you are looking for. 2) Splice that element out of the array using the index you just found.

Let's see how to do that:

function removeItemFromTodos(itemId, todos) {
  // find the index of the todo with the id you are looking for
  const indexOfTodoToDelete = todos.findIndex((todoInArray) => todoInArray.id === itemId));
  // remove that todo:
  todos.splice(indexOfTodoToDelete, 1) // delete the todo
}

Okay, so let's unpack that: First, the findIndex method loops over the array. It will start at index 0, and work up until it reaches the end of the array. If the item it is currently looking at has an id that matches the id we are looking for, then the function will immediately return the index of that todo's location in the array, and stop searching in the array.

Once you have the index, you can delete the item. The splice function takes in the location that you want to start cutting elements as the first argument, and the number of elements you want to cut as the second argument. The splice method returns the elements that were deleted. So it is actually mutating the array in place, and not making a copy of it in memory to perform its operation.

Let me know if this solution doesn't work for you or if it isn't clear!

Upvotes: 2

Related Questions