Question

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

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

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

Answer 1

在带有公共类名的范围内围绕每个新的HTML片段。然后，找到具有该类名的所有对象并将其删除。

将span和class name添加到：

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);

Answer 2

<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相同）删除您添加的任何问题

Answer 3

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

您还应该为这些字段设置ID，而不仅仅是名称。但它可以与他们的名字相同。

喜欢这个

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

然后，您知道，对您需要的其他输入字段执行相同操作。我知道你需要一个盒子的文本标签，或者其他什么，只需要在它们之前插入一个span标签的相同过程。

另外，我没有看到这两个计数变量的原因。而不是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--;
}

也许如果您要将其他元素与这些字段一起插入，例如标签的span标签等，最好将它们全部包装在div或其他内容中，然后只需执行removeChild即可这个容器只有div。

使用Javascript删除文本字段

3 个答案: