-1

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

<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.");
        }

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

4

3 回答 3

0 
<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 相同）

于 2013-09-12T04:16:33.653 回答
0

用一个通用的类名将每个新的 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);
于 2013-09-12T04:12:14.457 回答
0

您实际上应该在 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 执行一个操作。

于 2013-09-12T04:20:49.093 回答