如何清除動態添加的div內容並僅顯示div內容？

我有一個名爲「BenefitsValue」在我的頁面顯示設置爲無DIV ..如何清除動態添加的div內容並僅顯示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必須清除新廣告DED該分區的textboxes並告訴我只有我在div內指定的單個text box ..

我已經使用$("#BenefitsValue").empty();清除的內容，但如果我再使用$("#BenefitsValue").show()顯示它再次顯示它沒有...

如何克服它？

來源

2013-04-18 Xavier

嘗試$（「＃BenefitsValue」）。HTML（） – Alex

你可以添加額外的類的動態元素.... –

你可以讓jsFiddel？ –

這個怎麼樣？

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>

來源

2013-04-18 12:04:19

這很酷...... :)非常感謝。 – Xavier

您是否試圖隱藏視圖中的元素？

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

刪除內容。相反，使用

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

然後你可以使用.show()將其帶回

來源

2013-04-18 11:51:06 ColBeseder

如果我使用hide（）它只是隱藏，如果我再次顯示動態添加的文本框仍然..我只需要刪除那只有 – Xavier

根本就在單選按鈕變回傳。所以它會清除JavaScript添加的內容並將默認內容添加到頁面中。

或者爲動態內容添加不同的類並通過類名刪除它們。

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

來源

2013-04-18 11:51:37

您需要爲動態添加的文本框創建不同的<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();

來源

2013-04-18 11:54:39 mridula

如何清除動態添加的div內容並僅顯示div內容？

回答

相關問題