Day 25: Banish Boredom: Day 2

Lesson 2: Banish Boredom: 6

We have removed the item from our list but it won't leave the screen until you refresh the page, let's fix that.

We have two options. We could:

1. Remove just the item we need to from the screen.
2. Rerender the list from LocalStorage

These both come with tradeoffs that we need to weigh up as a developer.

With option 1 we get to make one very specific change to the DOM, we change exactly what we need to and no more. There is something nice and satisfying about that. As our application grows however there will be more and more places like this spread around the code base making it hard to maintain.

With option 2 we can encapsulate all of our rendering changes into one place, which means when our data change we can just call that function and have it rebuild the list from scratch. The downside is that we are deleting and rebuilding a massive part of our UI for just one or two things changing, this is wasteful and could lead to a slow application if the list had 1000s of entries.

Thankfully this isn't a real application that is going to have millions of users and thousands of saved items so I can show you both! We will implement the first and then change it to the second (mainly because in this case it's so simple to do option 1 🤭)

Please add these two lines to the end of your deleteActivity function:

1const deletedActivity = document.getElementById(key);
2deletedActivity.remove();

Now when you click delete the activity will disappear 🥳

Let's look at option 2 in the next lesson.