javascript - 克隆节点上的 JavaScript 清除文本框
问题描述
寻找有关在清除 HTML 表单时如何清除文本框的建议。这是 onclick 运行的 JS 代码:
var counter = 0;
function moreField() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields, insertHere);
}
我试过做一个getelementbyId
并试图为新创建的文本框分配一个“”值,但这似乎不起作用。下面是创建被克隆的表单的 HTML 代码:
<div class="InfoPanel">
<div id="readroot" style="display: block">
<br />
<asp:TextBox ID="txtHeadline" Columns="70" MaxLength="200" runat="server" />
<textarea id="txtReview" rows="5" cols="70" name="review"></textarea>
<br />
<input type="button" value="[Delete]" id="btnDeleteDetail" style="display: block; margin:auto; text-decoration:underline; text-align: right; border:none; cursor:pointer; color:#412C82; " onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
<form method="post" action="#">
<div id="writeroot"></div>
</form>
<asp:Button ID="btnAddDetail" autopostback="false" Text="Add Detail" CssClass="formbutt" OnClientClick="moreField();return false;" runat="server" />
<br />
</div>
就目前而言,运行此代码会很好地复制表单,但输入第一个表单的任何文本都将包含在任何后续表单中。我在这里先向您的帮助表示感谢。
解决方案
<div id="readroot" style="display: block">
应该是display: none
它在克隆上提供了一个干净的石板。