after learning the difference between parents and parent, I am having to resort to using parent(), but it's not very clean.
Consider the following table, which is embedded in a page, which may have additional tables (for this reason I cannot use parents("table") because it returns multiple tables): <table class="gridview" id="A" cellpadding="0" cellspacing="0"> <tbody> <tr class='gvheader'> <th width="20px"> </th> <th width="150px">Host</th> <th width="100px">Directs To</th> <th width="40px">TTL</th> </tr> <tr class="dgalt" id="trEmptyA" runat="server" visible="false"> <td colspan="5">You currently do not have any Records.</td> </tr> <tr class="gvfooter"> <td colspan="4" class="newRecord">Add New Record</td> </tr> </tbody> </table> and now my jquery: Notice the multiple .parent().parent().parent() and $currentTable.children().children().size(); $(function() { $(".newRecord").click(function() { var $currentTable = $(this).parent().parent().parent (); var tableType = $currentTable.attr("id"); var numRows = $currentTable.children().children().size (); var $templateRow = $("#EditRowTemplate").clone().attr ("id", "new"+tableType+"Record_"+numRows); if (tableType=='MX'){ $("td:nth-child(5)", $templateRow).show(); } else { $("td:nth-child(5)", $templateRow).hide(); } $templateRow.insertAfter($("tr:last", $currentTable).prev()); }); }); Is there a way to use parents, while only selecting the immediate parent table? and similarily with children, is there a better way to do this? I cannot always assume this is the first table, there may be 3,4,5 etc tables side-by-side. Thanks