Clear away what is finished

01 / 03

One button per row

Once something is finished you want it gone. The button that does that goes on each row, one each.

You build it exactly the way you built the li — make a button, then attach it inside the li. Each row ends up carrying its own.

const done = document.createElement("button")done.textContent = "Done"item.appendChild(done)

02 / 03

It remembers the row it belongs to

Here is the neat part. The code you write inside the button can just use the item you were building at the time.

Every time you add a row, a fresh item gets made — and the button made alongside it remembers that one. That is why pressing it removes only that row.

done.addEventListener("click", () => {  item.remove()})

03 / 03

Removing takes one word

item.remove() takes that element off the page. You do not have to go looking for what it was attached to.

If appendChild is "attach me", remove is "peel me off". They are a pair.