title: Table row expandable using recursive javascript function
body: <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>