How to clear the dynamically added div contents and display only the div contents?

Question

I have a div named 'BenefitsValue' in my page with display set to none..

<input id="Radio1" type="radio" name="bunit" value="1" onclick="onSample1()" 
       runat="server"/>Sample1
<input id="Radio2" type="radio" name="bunit" value="2" onclick="onSample2()" 
       runat="server"/>Sample2
<div id="BenefitsValue" style="display:none">
     <table id="approverTable">
          <tr id="rowtr" align="center">
              <td>
                 <input type="text" id="From" size="11" maxlength="9" 
                        class="gov-textbox" style="width: 100px;" />
               </td>
               <td>
                  <a id="addRangeLink" class="addRange" href="javascript:;" 
                     onclick="AddTextBox();">AddRange</a> 
               </td>
          </tr>
    </table>
 </div>

I will dynamically add multiple textboxes by clicking AddRange..

function AddRange() {
    var val = "";
    var oTable = document.getElementById('approverTable');
    var rowCount = oTable.rows.length;
    var row = oTable.insertRow(rowCount);
    var cell0 = row.insertCell(0);
    var innerhtml;
    cell0.innerHTML = '<input type="text" id="From' + rowCount
        + '"  size="11" maxlength="9" class="gov-textbox" style="width: 100px;" />';
    }

If I select radiobutton1 I will display the div content and I will dynamically add multiple textboxes by clicking AddRange....

Then once I select radiobutton2 it must clear the newly added textboxes of that div and show me only the single text box which I specified inside the div..

I have used $("#BenefitsValue").empty(); to clear the contents but if I then use $("#BenefitsValue").show() to show it again it displays nothing...

How to overcome it?

Answer 1

Simply do a postback in the radio button change. so it will clear the content added by JavaScript and add default content to the page.

or else add a different class for dynamic contents and remove those by class name.

$('dynamic-class').remove();

Answer 2

How about this?

Live Demo

JS

function AddRange() {
    var val = "";

    var oTable = document.getElementById('approverTable');

    var rowCount = oTable.rows.length;
    var row = oTable.insertRow(rowCount);
    row.className='dynamic';
    var cell0 = row.insertCell(0);
     var innerhtml;
    cell0.innerHTML = '<input type="text" id="From' + rowCount + '"  size="11" maxlength="9" class="gov-textbox" style="width: 100px;" />';
}

function onSample1(){
    $('#BenefitsValue').show();    
}

function onSample2(){
    $('.dynamic').remove();
}

HTML

<input id="Radio1" type="radio" name="bunit" value="1" onclick="onSample1()" runat="server"/>Sample1
<input id="Radio2" type="radio" name="bunit" value="2" onclick="onSample2()" runat="server"/>Sample2

<div id="BenefitsValue" style="display:none">
    <table id="approverTable">
        <tr id="rowtr" align="center">
            <td>
                <input type="text" id="From" size="11" maxlength="9" class="gov-textbox"                                         style="width: 100px;" />
            </td>
            <td>
                <a id="addRangeLink" class="addRange" href="javascript:;" onclick="AddRange();">AddRange</a> 
            </td>
        </tr>
    </table>
</div>

Answer 3

Are you trying to hide an element from view?

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

deletes the content. Instead, use

$("#BenefitsValue").hide();

Then you can use .show() to bring it back

Answer 4

You need to create a different <div> for the dynamically added text boxes. For example:

<table id="approverTable">
      <tr id="rowtr" align="center">
          <td>
             <input type="text" id="From" size="11" maxlength="9" 
                    class="gov-textbox" style="width: 100px;" />
           </td>
           <td>
              <a id="addRangeLink" class="addRange" href="javascript:;" 
                 onclick="AddTextBox();">AddRange</a> 
           </td>
           <td>
               <div id="dynamicallyAddedTextBoxesGoHere">
               </div>
           </td>
      </tr>
</table>

Add your text boxes to $("#dynamicallyAddedTextBoxesGoHere") . Then in your javascript you can show/hide this div -

$("#dynamicallyAddedTextBoxesGoHere").hide();

$("#dynamicallyAddedTextBoxesGoHere").show();