[英]How to clear the dynamically added div contents and display only the div contents?
I have a div named 'BenefitsValue' in my page with display set to none.. 我的页面上有一个名为“ 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>
I will dynamically add multiple textboxes by clicking AddRange.. 我将通过单击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.... 如果选择
radiobutton1
,则将显示div
内容,并通过单击AddRange ...动态添加多个textboxes
。
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.. 然后,一旦我选择
radiobutton2
它必须清除该div的新添加的textboxes
,并仅显示我在div中指定的单个text box
。
I have used $("#BenefitsValue").empty();
我用过
$("#BenefitsValue").empty();
to clear the contents but if I then use $("#BenefitsValue").show()
to show it again it displays nothing... 清除内容,但是如果我再使用
$("#BenefitsValue").show()
再次显示它,则什么也不会显示...
How to overcome it? 如何克服呢?
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.
因此它将清除JavaScript添加的内容并将默认内容添加到页面。
or else add a different class for dynamic contents and remove those by class name. 否则,请为动态内容添加其他类,并通过类名称将其删除。
$('dynamic-class').remove();
How about this? 这个怎么样?
JS 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 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>
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 然后,您可以使用
.show()
将其恢复
You need to create a different <div>
for the dynamically added text boxes. 您需要为动态添加的文本框创建一个不同的
<div>
。 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")
. 将您的文本框添加到
$("#dynamicallyAddedTextBoxesGoHere")
。 Then in your javascript you can show/hide this div - 然后在您的JavaScript中,您可以显示/隐藏该div-
$("#dynamicallyAddedTextBoxesGoHere").hide();
$("#dynamicallyAddedTextBoxesGoHere").show();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.