How to delete a row from a dynamic generate table using jquery?

My code creates dynamically a table using jquery. I want to add delete functionality to the table. So when clicking on delete image the row should be delete. But deleting works fine just when the tab开发者_C百科le is static. here id my code:

createTable: function () {
    var lastRow = $('#TblInvoiceList tr:last');
    var newRow = $('<tr>');
    newRow.append($('<td>').text($('input.Name').val()), $('<td>').text($('input.GrossAmount').val()));
    newRow.append("<td class='center'><img class='ImgDelete' src='image/ButtonDelete.png' /></td>");
    lastRow.before(newRow);}

and this is the delete function:

$('#TblInvoiceList td img.ImgDelete').click(function () {
    alert("hi");
    $(this).parent().parent().remove();
});

Use delegate even more efficient than live for dynamic added content do:

$('#TblInvoiceList').delegate('img.ImgDelete', 'click', function(e) {
     alert("hi");
     $(this).parent().parent().remove();
});

try with live as

The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation:

$('#TblInvoiceList td img.ImgDelete').live('click',function () {
    alert("hi");
    $(this).parent().parent().remove();
});