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

【问题标题】：JavaScript Clear TextBox on Clone Node克隆节点上的 JavaScript 清除文本框
【发布时间】：2021-11-09 22:03:38
【问题描述】：

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

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

【问题讨论】：

您正在循环访问新字段以设置名称。您可以将它们的值设置为“”吗？
感谢您的回复。所以理论上这是可行的。但是，我尝试为（在循环中或外部）分配空值的任何子文本元素最终都会使整个子元素为空，而不仅仅是它们的 val/value。它必须专门针对价值，不幸的是我在互联网上找不到这方面的信息。

标签： javascript html visual-studio clone

【解决方案1】：

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

应该是display: none，它在克隆时提供了一个干净的状态。

【讨论】：