Learn TypeScript 3 by Building Web Applications

Removing a single todo item

For now, you can only add things to the todo list, but it would certainly be better to be able to remove tasks once they've been completed.

In todo-it.ts, replace the following li.innerText = item; line with li.innerHTML = <a href='#' onclick='removeTodoListItem("${item}")'>${item}</a>;.

With this, we simply generate dummy HTML links that we use to highlight the fact that we can click on each of the items in the todo list. With the onclick event, we simply call a removeTodoListItem function, passing it the item to remove.

Again, using template strings allows us to write more readable code.

Let's implement that function now:

function removeTodoListItem(itemToRemove: string): void { console.log("item to remove: ",itemToRemove); ...