单击图像时从动态表中删除行

I am working on a PHP/MySQL grid that list two little icons, one is expected to delete the actual register and remove the row and the other is supposed to redirect the user to another page opening the details of the selected register. This is how my code looks like:

PHP:

$output .='<tr id="'.$id.'">';
$output .='<td align="center">'.$expiration_date.'</td>';
$output .='<td>'.$title.'</td>';
$output .='<td>'.$title_pt.'</td>';
$output .='<td align="center">'.$last_update.'</td>';
$output .='<td align="center">'.$active_pack.'</td>';
$output .='<td align="center" class="icon_grid"><a id="edit" title="Open the register." href="special_pack_open.php?id='.$id.'"><img src="images/Write2.gif" width="16" height="16" /></a></td>';
$output .='<td align="center" class="icon_grid"><a id="delete" title="Delete the register." href="#"><img src="images/Trash.gif" width="16" height="16" /></a></td>';
$output .='</tr>';

JQuery:

<script type="text/javascript">
$(document).ready(function() {
    $('table tr[id]').click(function(){
        $(this).closest("tr").remove();
        var obj = $(this);
         $.ajax({
           type: "POST",
           url: 'delete_package.php',
           data: { pk_id: obj.attr("id")},
           dataType: "json",
           success: function(data, evt) {
           if (data.success == "true") {
               alert('The record has been deleted successfuly!');
           } else {
               alert('error');
           }
           }
        })
    })
})
</script>

Everything is working very good. When I click in the Trash.gif, it deletes the register and remove the row. The thing is when I click on the Write2.Gif (second link) where it is supposed to go to the next page, it does the same action as delete does! How can I change my JQuery code to make it understand that only one link is dedicated to delete the register?

Thank you.

$("table tr[id]") is the selector for any tr that is a descendant of table that has any id attribute at all. You need a more specific selector.

As you will have many rows, you should probably be using a class instead of an id for edit/delete.

$(".delete").on("click", function () { /* your code */

You may also need to delegate the event

$("#id-of-table").on("click", ".delete"

I'm not that experienced with jQuery, but it appears that your selector is causing the deletion function to be associated with the click event of the tr. Try it with $('#delete').click instead of $('table tr[id]').click.

<script type="text/javascript">
$(document).ready(function() {
    $('table tr[id]').click(function(){
        $(this).closest("tr").remove();
        var obj = $(this);
         $.ajax({
           type: "POST",
           url: 'delete_package.php',
           data: { pk_id: obj.attr("id")},
           dataType: "json",
           success: function(data, evt) {
           if (data.success == "true") {
               alert('The record has been deleted successfuly!');
           } else {
               alert('error');
           }
           }
        })
    })
})
</script>

replace this $('table tr[id]') with this $('a#delete')