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

Question

您好，我需要使用加号和减号按钮添加和删除字段。每当我添加一个字段时，它都可以正常工作。当我在一个字段中输入内容然后添加另一个字段时，前一个字段会重置。此外，每当我单击减号按钮时，它都会删除所有字段。我希望它一次拿走一个而不重置其他字段，而且每当我单击减号按钮时，我都会不断收到 Not a Number (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

试试这个！

我将您的代码包装在一个 div 中 [并删除了“响应”范围]

<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

如果您有任何问题，请告诉我！

编辑：我制作了一个更简洁的版本，你现在可以顺便看看 :)

参考资料：

1. Create Input Element Dynamically
2. Remove Child Node in HTML

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

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

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

我将 id 更改为 1 的原因是因为以下输入的 ids 从 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 2

我不认为你可以用普通的 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 3

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

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