Table row expandable using recursive javascript function
<pre><code>&lt;tr onclick="removeAllDescendant(this)" parentid="@item.parentId" id="@item.id"&gt;
    &lt;td&gt;
    Use: &lt;input type="checkbox" value="@item.iaId" /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; 
    Qty: &lt;input type="text" class="width_100" /&gt;
&lt;/td&gt;
&lt;td&gt;@item.location&lt;/td&gt;
&lt;td&gt;@item.qty @item.uom&lt;/td&gt;
&lt;td&gt;@item.createDt&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>I have dynamically created these table rows, every row has parent-id and an id. I want to collapse all descendant row when user click in row.</p>

<p>Here is the javascript code- </p>

<pre><code>function removeAllDescendant(row)
{
   var id = $(row).attr("id");
   removeRows(row, id);
}

function removeRows(row, id) {
    var tr = $(row).nextAll('tr [parentid=' + id + ']');
    if (tr.length &gt; 0) {
        for (i = 0; i &lt; tr.length; i++) {
            id = $(tr[i]).attr("id");
            alert(id);
            removeRows(tr[i], id);
        }
    }
    $(tr).remove();
}
</code></pre>

<p>Do you guys see any bug in this recursive function, for some reason this is not working in case I have more than 3 levels.</p>
