Question

您好我需要添加字段并使用加号和减号按钮删除。每当我添加一个字段时，它工作正常。当我在字段中输入内容然后添加另一个字段时，前一个字段将重置。此外，每当我单击减号按钮时，它将删除所有字段。我希望它一次取走一个而不重置其他字段，并且每当我点击减号按钮时我都会收到一个非数字（NaN）错误。任何帮助是极大的赞赏。我将在下面显示我的代码。

<input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
<input name="-" type="button" id="-" onclick="subtractInput()" value="-" label="-" />

<span id="response"></span>
<script>
    var countBox = 1;
    var boxName = 0;

    function addInput() {
        var boxName = "#";
        document.getElementById('response').innerHTML += '<br/><input type="text" id="' + boxName + '" value="' + boxName + '" "  /><br/>';
        countBox += 1;
    }

    function subtractInput() {
        var boxName = "#";
        document.getElementById('response').innerHTML -= '<br/><input type="text" id="' + boxName + '" value="' + boxName + '" "  /><br/>';
        countBox -= 1;
    }
</script>

Answer 1

我认为你不能删除普通JS的元素。所以，这里有一些jQuery。

var countBox = 1;
var boxName = 0;

function addInput() {
    var boxName = "#";
    document.getElementById('response').innerHTML += '<br/><input type="text" id="' +     countBox + '" value="' + boxName + '" "  /><br/>';
    countBox += 1;
}

function subtractInput() {
    var boxName = "#";
    $(function(){
    $('#' + countBox).remove();
    });
    countBox -= 1;
}

我自己测试过，它确实有效。问题是，它不断添加到最后一个被移除的位置，而不是返回它应该开始的位置。这是你的jQuery链接：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Answer 2

基于similar question asked previously，看起来无法使用javascript完成，但可以使用jQuery的函数append()来完成。

Answer 3

试试这个！

我将您的代码包装在div中[并删除了'响应'span]

<div id="container">
    <input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
    <input name="-" type="button" id="-" onclick="subtractInput()" value="-" label="-" />
</div>

然后更改了您的javascript，如下所示：

var countBox = 1;

function addInput() {
    var breakNode = document.createElement("br");
    breakNode.className = countBox.toString();

    var input = document.createElement("input");
    input.type = "text";
    input.className = countBox.toString();
    input.value = "#" + countBox.toString();

    var container = document.getElementById('container');
    container.appendChild(breakNode);
    container.appendChild(input);

    countBox += 1;
}

function subtractInput() {
    countBox -= 1;

    // There will be 2 elements: 1 input, 1 br.
    var elements = document.getElementsByClassName(countBox.toString());
    var input = elements[1];
    var br = elements[0];

    input.parentNode.removeChild(input);
    br.parentNode.removeChild(br);
}

Try it with this Fiddle

如果您遇到问题，请告诉我们！

编辑：我制作了一个更清洁的版本，您现在可以查看：）

参考文献：

Create Input Element Dynamically
Remove Child Node in HTML

编辑2：以下是您的新问题的解决方案：

首先，我在第一个输入的名称1中添加了ECPartNumber，并将其id更改为1：

<input name="ECPartNumber1" type="text" id="1" value="#" size="10" maxlength="10">

我将id更改为1的原因是因为以下输入的id从1开始计数，所以我认为这看起来更好。

接下来，我在javascript文件的顶部声明var countBox = 1;，以便FrontPage_Form1_Validator函数可以使用它。

在addInput函数中，我添加了一行来为每个输入创建新名称：

input.name = "ECPartNumber" + countBox.toString();

在subtractInput函数中，我添加了一个if语句，以确保您无法删除原始的ECPartNumber输入：

if (countBox >= 2) {
    ...
}

最后，在FrontPage_Form1_Validator函数中，我创建了一个for循环，用于运行每个ECPartNumber的名称以检查它们是否为“＃”或更多：

for (var i = 1; i <= countBox; i++) {
    var partNum = "ECPartNumber" + i.toString();
    if (theForm[partNum].value == "#") {
        alert("Please enter a value for the \"EC Part Number\" field. (slot "+i+")");
        theForm[partNum].focus();
        return (false);
    }
}

Updated Fiddle

Answer 4

首先，新浏览器不允许您复制用户制作的html中的更改，这就是“上一个字段重置”的原因

现在只需使用javascript就可以了：

<script>
    var countBox = 0;
    var boxName = "SomeId";

    var addInput = function(){
        alert(boxName+countBox);
        var br = document.createElement("br");
        var input = document.createElement("input");
        input.id=boxName+countBox;
        input.value=boxName;
        document.getElementById("response").appendChild(input);
        document.getElementById("response").appendChild(br);
        countBox++;
    }

    var subtractInput = function(){
        countBox--;
        alert(boxName+countBox);
        document.getElementById("response").removeChild(document.getElementById(boxName+(countBox)));
        document.getElementById("response").removeChild(document.getElementById('response').getElementsByTagName('br')[countBox]);
    }
</script>

您可以找到一个有效的示例here

添加字段而不重置所有字段

4 个答案: