In JQuery, trouble with removing tags in table correctly
<p>I have the following page:</p>

<pre><code>&lt;div style="display: inline"&gt;
&lt;input type="button" id="txt" value="Add TextBox" style="" /&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;h1 id="headerBuilder"&gt;Build the New Control&lt;/h1&gt;
&lt;table id="tblControls" width="50%"table&gt;
&lt;br/&gt;
&lt;input type="button" id="btnProcessControl" value="Generate New" /&gt;
</code></pre>

<p>In my JQuery code I create two table rows, each with two table data cells.  </p>

<pre><code>function displayTxtBuilder() {
    $("#tblControls").contents().remove();

    var $MaxLengthQuestion = $('&lt;label /&gt;').text('Set the Max Length Value:');
    var $MaxLengthInput = $('&lt;input/&gt;').attr({ type: 'text', id: 'maxlength', size: '3', maxlength: '3', value: 'max' });
    var $BodyQuestion = $('&lt;label /&gt;').text('Set the initial value of the textbox:');
    var $BodyInput = $('&lt;input/&gt;').attr({ type: 'text', id: 'body', size: '3', value: 'body' });

    $("#tblControls").last().append(
                $TableRow.append($TableData.append($MaxLengthQuestion)).append($TableData2.append($MaxLengthInput))
            );

    $("#tblControls").last().append(
                $TableRow2.append($TableData3.append($BodyQuestion)).append($TableData4.append($BodyInput))
            );
}
</code></pre>

<p>I thought that the code</p>

<pre><code>$("#tblControls").contents().remove();
</code></pre>

<p>would remove all the contents of tblControls, but instead I see the $TableRow.append being repeated everytime I run displayTxtBuilder.  Not sure why its doing only repeating the first append.  On the other hand, if I replace </p>

<pre><code>$("#tblControls").contents().remove();
</code></pre>

<p>with</p>

<pre><code>$("#tblControls").remove();
</code></pre>

<p>none of the <code>.last().append()</code> rows show up.</p>
