jQuery - HTML5, JavaScript, and jQuery - page 122

In order to demonstrate this, we will add a click listener to be able to delete each row in the
table.

Before beginning, we need to add navigation buttons to each row in the table body. Add
the following to each row in the tbody immediately before the </tr> (there are 3 of them):
<td>

<nav>

<a href="#" class="editRow">Edit</a>

<a href="#" class="completeRow">Complete</a>
<a href="#" class="deleteRow" >Delete</a>

</nav>

</td>

In addition, add a new header cell inside the table header immediately before the </tr>:
<th>Actions</th>

Finally, to make sure the columns are sized correctly, change the column groups for the
table as follows:
<colgroup>

<col width="40%">
<col width="15%">

<col width="15%">

<col width="30%">

</colgroup>

In order to verify the changes, executing the following should return three elements:
$('.deleteRow')

We can now add an event listener as follows:
$('#tblTasks tbody').on('click', '.deleteRow', function(evt) {

evt.preventDefault();

$(evt.target).parents('tr').remove();

});

When an element with the class deleteRow is clicked, this event listener will find the tr
element that is a parent of this element:
$(evt.target).parents('tr')

It will then remove this element from the document using the remove function.