添加一個字段，但不會重置所有字段

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

試試看！

我包內一個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：我做了一個更清潔的版本，現在可以通過方式:)

參考看看：以下是您的新問題的解決方案：

首先，我添加了一個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功能我犯了一個用於運行關每個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