错误:自动计数添加的文本框，这是不应该的

Question

当我在添加文本框时，主文本框自动输入已添加的文本框的数量，这不是完全需要的。

这是代码

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，再次点击"添加颜色"，所以它会再次创建一个新的div, id相同的my2Div。然后，如果你点击删除，那么我们有两个div具有相同的id "my2Div"，所以它会抛出错误。

首先输入1，然后单击添加颜色我将创建文本框，然后在第一个文本框中输入2，然后单击添加颜色，它将再次创建具有不同id的新Div，这次您可以使用删除功能。

我会说添加逻辑不正确。

试试下面的提琴

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

Answer 2

您将ID作为参数传递，您需要获得实际的DOM元素才能删除它。

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