使用 Javascript 删除文本字段答案

【问题标题】：Removing a text field using Javascript使用 Javascript 删除文本字段
【发布时间】：2013-09-12 04:06:09
【问题描述】：

我有以下代码在调用函数时添加文本字段：

<span id="response"></span>
        <script>
        var qcountBox = 2;
        var acountBox = 2;
        var qboxName = 0;
        var aboxName = 0;
        function addInput()
        {
             var qboxName="question"+qcountBox;
             var aboxName="answer"+acountBox;
             if(qcountBox <=10 && acountBox <= 10) 
                {
                document.getElementById('response').innerHTML+='<br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/>';
                document.getElementById('response').innerHTML+='<br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/>';
                qcountBox ++;
                acountBox ++;
             }else
             alert("No more than 10 questions allowed at this time.");
        }

我还希望能够添加一个函数来删除我添加的任何新字段。有什么建议么？谢谢

【问题讨论】：

在添加问题时使用特定的 id 作为 div 并将您的问题添加到其中，然后使用 id 完全删除该 div 很容易

标签： javascript function textfield

【解决方案1】：

<script>
        var qcountBox = 1;
        var acountBox = 1;
        var qboxName = 0;
        var aboxName = 0;
        function addInput()
        {
             var qboxName="question"+qcountBox;
             var aboxName="answer"+acountBox;
             if(qcountBox <=10 && acountBox <= 10) 
                {
                document.getElementById('response').innerHTML+='<div id="'+qcountBox+'"><br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/>';
                document.getElementById('response').innerHTML+='<br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/></div>';
                qcountBox ++;
                acountBox ++;
             }else
             alert("No more than 10 questions allowed at this time.");
        }
        function removeInput(id)
        {
             document.getElementById(id).innerHTML = '';
        }

您可以使用问题 div 的 id（与 qboxName 相同）删除您添加的任何问题

【讨论】：

【解决方案2】：

用一个通用的类名将每个新的 HTML 片段包围在一个跨度中。然后，找到具有该类名的所有对象并将其删除。

将跨度和类名添加到这些：

document.getElementById('response').innerHTML+='<span class="added"> <br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/></span>';
document.getElementById('response').innerHTML+='<span class="added"><br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/></span>';

然后，您可以像这样删除所有添加的跨度：

var items = document.getElementsByClassName("added");
for (var i = 0; i < items.length; i++) {
    items[i].parentNode.removeChild(items[i]);
}

注意：这通常是添加新 HTML 的更好方法，因为它不会重写所有以前的 HTML - 它只是添加新的 DOM 对象：

var span = document.createElement("span");
span.className = "added";
span.innerHTML = '<br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/><br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/>';
document.getElementById('response').appendChild(span);

【讨论】：

我有一个 span 我忘了包含那部分代码，我刚刚更新了它。我如何使用您发布的按钮？谢谢
您创建一个按钮，附加一个单击处理程序，该处理程序执行删除添加的问题的代码。
看来我打到了别人的软肋
@MattI - 在您发表评论之前，我编辑了我之前的评论。但是，我觉得你需要自己在这里做一些研究，至少找出如何将 javascript 连接到按钮点击。

【解决方案3】：

您实际上应该在 javascript 中创建一个输入元素，并通过 appendChild 将其附加到您的容器中，而不是使用 innerHTML +=。

您还应该为这些字段设置一个 ID，而不仅仅是一个名称。但它可以和他们的名字一样。

像这样

var input = document.createElement("input");
input.type = "text";
input.name = input.id = qboxName;
document.getElementById("response").appendChild(input);

然后，您知道，对您需要的其他输入字段执行相同操作。我知道您需要为框或其他任何内容添加文本标签，只需执行相同的过程即可在它们之前插入跨度标签。

另外，我看不出这两个计数变量的原因。而不是qcountBox 和acountBox，完全有可能只有一个计数变量。也许我错了，但你不应该在设置盒子名称之前增加这个计数吗？

至于删除它，您可以使用removeChild 方法，然后减少您的计数变量。像这样：

function removeInput()
{
    var qboxName = "question" + count;
    var aboxName = "answer" + count;
    document.getElementById("response").removeChild(document.getElementById(aboxName));
    document.getElementById("response").removeChild(document.getElementById(aboxName));
    count--;
}

也许如果您要在这些字段中插入其他元素，例如标签的跨度标签等，最好将它们全部包装在一个 div 或其他东西中，然后只需对该容器执行 removeChild仅 div。

【讨论】：