Question

I have a table that displays data for the user. Each row can have 2 functions, one to delete and the other to edit the record. The row itself has an id that I need to reference for both the delete and the edit functions. I am having a difficult time getting this to work correctly.

The last cell on the right is for the delete image. When I click on just the delete icon, I get an alert from the row even though I have the delete cell specified in not().

The last issue I am having is that $.post is not passing any POST value. Even if I set it manually, I cannot see it server-side.

Here is my code so far.

$('#drafts').find('tr').not(':first-child, td.delete').click( function(){
  alert(this.id);
});

$("td.delete").click(function(){
  var id = this.id;
  $.post('test.php',id, function(){
    $('#'+id).remove();
  },'json');
});

<tr id="5">
  <td>test1</td>
  <td>test2</td>
  <td class="delete">&nbsp;</td>
</tr>

Answer 1

use this code:

$("td.delete").click(function(){
  var id = $(this).parents('tr').eq(0).attr('id');
  $.post('test.php', {'id': id}, function(){
    $('#'+id).remove();
  },'json');
});

and this one for your edit action (but I don’t know what do you want to do here):

$("td.edit").click(function(){
  var id = $(this).parents('tr').eq(0).attr('id');

  // now you have `id` of current row
  // write your code here
});

You said that you want the entire row for edit action, except the delete cell:

$("tr td:not(.delete)").click(function(){
  var id = $(this).parents('tr').eq(0).attr('id');
  $.post('test.php', {'id': id}, function(){
    $('#'+id).remove();
  },'json');
});