30 Days Of JavaScript

Day 25: Banish Boredom: Day 2

Lesson 4: Banish Boredom: 8

As you saved and maybe deleted some activities you should have noticed some odd behavior.

You list was getting longer and longer and activities are repeated. Yet when you refresh the page the list is correct.

You see, our render list function doesn't clear out the existing list first. Thankfully this is a simple fix, we just need to delete any activities from the UI first.

Our activities are <div>s inside a <div id="list"> so we can delete them all by creating a function:

1const clearList = () => {
2  while (list.firstChild) {
3    list.removeChild(list.lastChild);
4  }
5};

Then calling it at the top of renderList like this:

1const renderList = () => {
2  clearList();
3
4  const savedActivitiesString = localStorage.getItem("activities");
5
6  ...

Now when you click "Love it" and Delete, your list updates accordingly without a page reload and with no duplicate activities.

Outline

Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co