如何清除动态添加的div内容，只显示div内容？答案

【问题标题】：How to clear the dynamically added div contents and display only the div contents?如何清除动态添加的div内容，只显示div内容？
【发布时间】：2013-04-18 20:04:19
【问题描述】：

我的页面中有一个名为“BenefitsValue”的 div，显示设置为无。

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

我将通过点击 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;" />';
    }

如果我选择radiobutton1，我将显示div 内容，我将通过单击AddRange...动态添加多个textboxes。

然后，一旦我选择 radiobutton2，它必须清除该 div 中新添加的 textboxes，并只显示我在 div 中指定的单个 text box..

我已经使用$("#BenefitsValue").empty(); 清除内容，但如果我随后使用$("#BenefitsValue").show() 再次显示它，它不会显示任何内容...

如何克服？

【问题讨论】：

试试 $("#BenefitsValue").html()
你可以为动态元素添加额外的类......
你会做jsFiddel吗？
请制作jsfiddle.net 示例
检查这个....jsfiddle.net/nfdjQ

标签： c# javascript jquery asp.net html

【解决方案1】：

这个怎么样？

Live Demo

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>

【讨论】：

太酷了...:) 非常感谢。

【解决方案2】：

只需在单选按钮更改中进行回发。所以它会清除JavaScript添加的内容，并将默认内容添加到页面中。

或者为动态内容添加不同的类并按类名删除。

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

【讨论】：

【解决方案3】：

你想隐藏一个元素吗？

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

删除内容。相反，使用

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

那你可以用.show()把它带回来

【讨论】：

如果我使用 hide() 它只是隐藏，如果我再次显示动态添加的文本框仍然存在.. 我只需要删除它

【解决方案4】：

您需要为动态添加的文本框创建不同的<div>。例如：

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

将您的文本框添加到$("#dynamicallyAddedTextBoxesGoHere")。然后在你的 javascript 中你可以显示/隐藏这个 div -

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

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

【讨论】：