How to find rowindex when clicked a button in table

Question

I want to find row which clicked button in.

<table>
  <tr>
    <td>foo 1</td>
    <td><input  type="button" value="Remove" id="remove1"/> </td>
  </tr>
  <tr>
    <td>foo 2 </td>
    <td><input  type="button" value="Remove" id="remove2"/> </td>
  </tr>
</table>

My table struct is like above. Normally I can us buttonid to get row index. But If I remove a row (tr) another row index changes. For example:

If I remove first row with jQuery, second row index changes as 0 then I cannot use button's id. (remove - 2 )

Well I think that I must use parent function but it doesn't work.

var elem = $('#remove2');
alert(elem.parent()[0].sectionRowIndex);

I tried this one but doesn't work. I need row index that clicked button in the row.

I hope that I explained my issue.

Answer 1

Try this:

$("table tr input").on('click', function(e){
   alert($(this).closest('td').parent()[0].sectionRowIndex);
});​

FIDDLE

Answer 2

Try using this: http://jsfiddle.net/jd9N4/1/

var elem = $('input[type="button"]');
$(elem).click(function() {
   alert($(this).closest('tr').index());
   $(this).closest('tr').remove();
});