错误：自动计算添加的文本框不应该是

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