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


i have div named 'benefitsvalue' in page display set 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 dynamically add multiple textboxes 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 select radiobutton1 display div content , dynamically add multiple textboxes clicking addrange....

then once select radiobutton2 must clear newly added textboxes of div , show me single text box specified inside div..

i have used $("#benefitsvalue").empty(); clear contents if use $("#benefitsvalue").show() show again displays nothing...

how overcome it?

how 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> 

Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -