Clear finished items in one go

01 / 03

Removing them one by one is tedious

In the last step, pressing Done now dims the row instead of removing it right away. That lets things pile up.

When several are done, you want a clear them all button. This is where querySelectorAll comes back.

02 / 03

The selector picks only the finished ones

document.querySelectorAll("#list li.is-done") returns only the li elements that have is-done.

.is-done is the class classList.toggle adds and removes. Only the rows where Done was pressed carry it.

const doneItems = document.querySelectorAll("#list li.is-done")console.log(doneItems.length) // number of finished rows

03 / 03

Loop through and remove

Once you have them, for...of and remove() finish the job.

Put this together with the last step and the pattern is clear: select with a filter, then do something to all of them. That is the most general DOM pattern there is.

for (const item of doneItems) {  item.remove()}