Question

UPDATE 1:

I’m wondering if it has anything to do with the button being within the element which is being deleted, so it would end up deleting the button which does the deleting too? That might not be the problem, I was just typing that I’m thinking.

I’ve just tried:

$( "input.btnX" ).click(function(event) {
    alert("test");
});

and I don’t get an alert… Should I be using live or is it on now because the buttons along with the table are dynamically generated.

ORIGINAL QUESTION:

I have a table (dynamically generated, so I won’t know how many tr’s it has in tbody which looks something like this:

<table>
    <tbody>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" class="btnX" name="x" value="x" /></td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" class="btnX" name="x" value="x" /></td>
        </tr>
    </tbody>
</table>

How do I delete the parent tr if an x button is clicked? So in this example, if the bottom x is clicked, it should remove the bottom tr.

I’ve tried this:

$( "input.btnX" ).click(function(event) {
    $(this).parent('tr').remove();
});

But nothing happens.

Answer 1

Just use

    $( "input.btnX" ).click(function(event) {
    $(this).parent().parent().remove();
});

Or

  $( "input.btnX" ).click(function(event) {
        $(this).closest("tr").remove();
    });

As what you are doing is going to the parent which is the tr and then looking for a tr

See an example here http://jsfiddle.net/gYDUF/

If your table is beeing rendered by javascript you may also have to change your click on

$("input.btnX" ).live(click, function(){

     $(this).closest("tr").remove();
});