Remove element's parent row

Question

I have a table with buttons in cells, like so:

<table>
    <tr>
        <td>information</td>
        <td>
            <button onclick="function(id, this)">Text</button>
        </td>
    </tr>
</table>

The function called when the button is pressed does some ajax stuff, and if it's successful, the whole row where the button is should be removed from the DOM. (It's a delete function ;)

However, I can't seem to get jQuery to remove the correct row. I've used $('#id').parent().parent().remove();, as I thought it would go: button -> cell -> row, but it just removes the first row of the table?! Wherever did I lose? :(

Answer 1

http://jsfiddle.net/ZnX5J/

<table>
    <tr>
        <td>information</td>
        <td>
            <button onclick="removeRow(this)">Text</button>
        </td>
    </tr>
    <tr>
        <td>blah</td>
        <td>
            <button onclick="removeRow(this)">Text</button>
        </td>
    </tr>
</table>

JavaScript

removeRow = function(el) {
    $(el).parents("tr").remove()       
}

Answer 2

.closest() can do that easily -

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

You can remove inline onClick and handle the click like this -

$('button').on('click',function(){
   $(this).closest('tr').remove();
});

Demo ------> http://jsfiddle.net/2nJYe/