In JQuery, trouble with removing tags in table correctly

I have the following page:

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

In my JQuery code I create two table rows, each with two table data cells.

function displayTxtBuilder() {
    $  ("#tblControls").contents().remove();

    var $  MaxLengthQuestion = $  ('<label />').text('Set the Max Length Value:');
    var $  MaxLengthInput = $  ('<input/>').attr({ type: 'text', id: 'maxlength', size: '3', maxlength: '3', value: 'max' });
    var $  BodyQuestion = $  ('<label />').text('Set the initial value of the textbox:');
    var $  BodyInput = $  ('<input/>').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))
            );
}

I thought that the code

$  ("#tblControls").contents().remove();

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

$  ("#tblControls").contents().remove();

with

$  ("#tblControls").remove();

none of the .last().append() rows show up.

J

newest questions tagged jquery – Stack Overflow