Salesforce LWC Tutorial Part 3 | ToDo App Project | Removing elements from ToDo List

Hello Trailblazers,

Welcome to the third tutorial in LWC Tutorial Series where we're building a ToDo App Project. We're focusing on the concept of Learning By Doing in this tutorial series. In this tutorial, we'll be modifying the JavaScript and HTML code of our ToDo Application so that we're able to remove a ToDo Task from the list by clicking on the delete button icon. The final result will be as follows:-

So, let's continue building the above application. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

I highly recommend you to have a look at the video to understand in detail. However, let's have a quick look at the code below to understand in short:-

HTML Snippet (todo.html)

Have a look at the code above, if you carefully see the delete button-icon, you'll notice that, I've added a name attribute and an onclick attribute. The name attribute consist of the id of current todo task which is being rendered in the list, specified by todoTask.Id. Using this name attribute we can identify which task is being deleted in the js and remove that task from the todo list array. The onclick attribute is binded with a js function named as:- deleteTaskFromList

Let's have a look at the changes in JavaScript code now.

JS Snippet (todo.js)

As you can see above, I added a new method named as:- deleteTaskFromList() which will be used to remove a task from the ToDo List. Whenever we're clicking on the delete button icon, we're getting the id of the task which we have to delete by using event.target.name and storing it in idToDelete variable. We're assigning the list of todo tasks to a local variable named as todoTasks that we're going to use in this method. We declared another variable named as todoTaskIndex which will be used to store the index of todo task that we have to delete.

After that we're iterating all the todo tasks using a for loop and we're storing the index of the todo task in the todoTaskIndex variable whose id is equal to the id stored in idToDelete variable.

Finally, we're removing the todo task from the list by calling the splice() method on the todoTasks array. The splice() method takes up the index of the element to remove from the array as the first parameter and the number of elements to remove from the array (starting from that index) as the second parameter.

In the method 2, which is commented in the above code, we're using the findIndex() method to find the index of the todo task that we need to remove from the list.

We've re-written the same code specified in method 2 in method 3 also, the only difference is that we've used the arrow function => there to reduce the code to one line. Please have a look at the video for a detailed explanation of those.

You can use any of the methods out of:- method 1, method 2 or method 3. All will do the same work i.e. removing the element from the todo list.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!