JavaScript 清除克隆节点上的文本框

Question

正在寻找有关如何在清除 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>

按照目前的情况，运行此代码可以很好地复制表单，但在第一个表单中输入的任何文本都将包含在任何后续表单中。提前感谢您的帮助。

Answer 1

    <div id="readroot" style="display: block">

应该是 display: none，它提供了一个全新的克隆平台。

JavaScript 清除克隆节点上的文本框

JavaScript Clear TextBox on Clone Node

javascript

html

visual-studio

clone