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.