錯誤：自動計算添加的文本框不應該是

Question

當我添加一個文本框時，主文本框自動輸入已添加的文本框數量並不是完全需要的。

這裏是你傳遞ID作爲參數代碼

function addElement() { 
 
    var ni = document.getElementById('myDiv'); 
 
    var numi = document.getElementById('theValue'); 
 
    var num = (document.getElementById('theValue').value - 1 + 2); 
 
    numi.value = num; 
 
    var newdiv = document.createElement('div'); 
 
    var divIdName = 'my' + num + 'Div'; 
 
    newdiv.setAttribute('id', divIdName); 
 
    newdiv.innerHTML = '<div class="form-group"> <label for="color" class="control-label col-xs-4"><p class="left"></p></label> <div class="col-xs-7"> <input type=text id=' + num + 'value= ' + num + ' class= "req"><a href="javascript:remove(' + divIdName + ')">Remove</a>'; 
 
    ni.appendChild(newdiv); 
 
} 
 

 

 
function remove(dId) { 
 
    var ni = document.getElementById('myDiv'); 
 
    ni.removeChild(dId); 
 
}

<label for="color" class="control-label col-xs-4"> 
 
    <p class="left">Color/s</p> 
 
</label> 
 

 

 
<input name="color" class="req" id="theValue" autocomplete="off" required/> 
 

 
<p><a class="btn btn-default bt " role="button" href="javascript:addElement()">Add Color</a> 
 
</p> 
 
<div id="myDiv"></div> 
 
<div style='clear: both;'></div>

Answer 1

當您添加文本框時，嘗試第一個文本框中的不同值，它將起作用。問題是你輸入1並點擊「添加顏色」它將創建新的div作爲my2Div，再次單擊「添加顏色」，因此它將再次創建具有相同id my2Div的新div。然後如果你點擊刪除，那麼我們有兩個具有相同ID「my2Div」的div，所以它會拋出錯誤。

先輸入1然後點擊添加顏色我將創建文本框，然後在第一個文本框中輸入2，然後單擊添加顏色它將再次創建具有不同ID的新Div，這次您可以使用刪除功能。

我會說添加邏輯是不正確的。

嘗試以下​​

var numi = document.getElementsByName('theValue'); 
var num = (numi.length + 1); 
.. 
.. 
newdiv.setAttribute('id', divIdName); 
newdiv.setAttribute('name', 'theValue'); 

Answer 2

，你需要得到實際的DOM元素，以便能夠將其刪除。

function remove(dId) { 
     var parentNode = document.getElementById('myDiv'), 
     childNode =document.getElementById(dId) ; 

     parentNode.removeChild(childNode); 
    }