The second feature of our to-do application is to give the users the ability to delete a task. We will do this by adding an Actions column to our tasks table and providing a Delete button for each task in the Actions column. The task will be removed from the tasks array when the Delete button for that task is clicked upon.
Add the Actions column to the tasks table by adding the column header to the thead element:
<th>Actions</th>
Add this code after <th>Description</th>. Now add the column body with a button for deleting the task. The new column goes after the Description column. It should look similar to the following code:
<td><button class="btn btn-danger" data-bind="click: ToDoList.deleteTask">Delete</button></td>
The preceding code renders a button with the label, Delete, for each of the tasks in our tasks table. The click of the buttons are bound to the deleteTask method in our ToDoList module.
Let's now add the deleteTask method...