Question

I have html that displays a table similar to:

<table>
<tr>
    <th>col1</th>
    <th>col2</ht>
</tr>
<tr>
    <td>0001</td>
    <td>Test</td>
</tr>
<tr>
    <td colspan="2" id="detailsTable">
        <table>
            <tr>
                <th>one</th>
                <th>two</th>
            </tr>
            <tr>
                <td>xxxxxx</td>
                <td>xxxxxxx</td>
            </tr>               
        </table>
    </td>
</tr>

There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.

The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn’t work.

I had code like:

var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();

If the row only contains text it works as I’d like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.

I’m using ASP.Net and jQuery for this.

Thanks
Alan.

Answer 1

How about:

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

I’m not sure if this is exactly what you have, but here’s a JSFiddle demonstrating that it works:

http://jsfiddle.net/9TQG9/1/

EDIT: Actually this:

$(this).parents("tr").eq(0).remove();

would be much nicer and more reliable. See here:

http://jsfiddle.net/9TQG9/2/