Question

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.

Answer 1

Use empty()

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