jQuery: remove the closest with a dynamically added button

Question

i am unable to remove a row in table using dynamically generated buttons. The main problem is that the "alert()" does not work. How do i catch the 'click' event?

jQuery:

$("#officers-table").on('click', '.remove-officer-button', function(e) {
    var whichtr = $(this).closest("tr");

    alert('worked'); // Alert does not work
    whichtr.remove();      
});

---

HTML/PHP (updated the code)

<table id="officers-table" class="ui-widget ui-widget-content">
<?php if($num_officers > 0): ?>
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Director</th>
        <th>Shareholder</th>
        <th>Secretary</th>
        <th colspan="2">Options</th>
      </tr>
    </thead>
<?php endif; ?>
<tbody>
<?php foreach ($officers as $item): ?>
  <tr>
    <td><?=$item->name?> <?=$item->lastname?></td>
    <td><?=$item->is_director?></td>
    <td><?=$item->is_shareholder?></td>
    <td><?=$item->is_secretary?></td>
    <td>Edit</td>
    <td><button type="button" value="<?=$item->id?>" class="remove-officer-button">Remove</button></td>
  </tr>     
<?php endforeach; ?>
  </tbody>
</table>

Answer 1

Try this (Works in JSFiddle):

$(".remove-officer-button").on('click', function(e) {
    var whichtr = $(this).closest("tr");
    alert('worked'); // Alert does not work
    whichtr.remove();      
});

Edit
As everyone said, your code seems to work fine as is. Check this JSFiddle:
Original Code: http://jsfiddle.net/mkqU2/1/

You can use the above code as an alternative, but it sounds like you have some other javascript error causing the script to break.

Also.. Make sure you code is inside the DOM Ready event. If its not, Nothing happens when you click the button.
The below jsfiddle replicates your error, the click event don't fire if not wrapped within the DOM Ready event, or window load event.
Not Inside DOM Ready: http://jsfiddle.net/mkqU2/2/

Answer 2

There is no need to alter your code, which works fine:

http://jsfiddle.net/yAMjj/

The problem seems to be that your table doesn't have the right ID. Make sure it's

<table id="officers-table">

Answer 3

Try

$(this).parent('tr').remove();

or

$(this).parent().remove();

Answer 4

This answer goes a little beyond the scope of the question but the answers here pointed me in the right direction so i wanted to give something back.

This is a simple version of what I did with it for removal after a successful ajax result, I found $(this) in the ajax result section didn't remove the row, I think at that point it may be that "this" is either the ajax object or the success property and not button.

// My button markup ends up like this with php echoing out the id numbers.
// one button in each row.
<button type="button" id="delete234" value="234">Delete</button>

$('button[id^=\'delete\']').on('click', function() {
 if (confirm('Are you sure?')) {
   var node = this;

   $.ajax({
     url: 'http://example.com/somewhere.php?somethingtodelete=' + $(node).val(),
     dataType: 'json',
     success: function (json) {
       if (json['success']) {
         $(node).closest('tr').remove();
       }
     }
   });
  }
});

Answer 5

$(whichtr).remove() ? Would this work?