首页 > 解决方案 > 克隆节点上的 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>

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

标签: javascripthtmlvisual-studioclone

解决方案


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

应该是display: none它在克隆上提供了一个干净的石板。


推荐阅读