添加/删除字段缺少ID的

Question

我有一些麻烦，我的添加/删除字段代码。

如果我在phpfiddle中运行此代码，并使用添加按钮创建额外的字段。

<script> 
       var i = 1; 
     function addKid(){ 
      if (i <= 5){ 
       i++; 
       var div = document.createElement('div'); 
       div.style.width = "600px"; 
       div.style.height = "50px"; 
       div.style.color = "white"; 
       div.setAttribute('class', 'myclass'); 
       div.innerHTML = 'Child : <input type="text" name="child_'+i+'" > Ages : <input type="text" name="ages_'+i+'"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">'; 

       document.getElementById('kids').appendChild(div); 
       } 
       } 
       function removeKid(div) { 
        document.getElementById('kids').removeChild(div.parentNode); 
        i--; } 
</script> 




     <div id="kids"> 
        Child : <input id="child_1" type="text" name="child_'+i+'"> 
        Ages : <input id="ages_1" type="text" name="ages_'+i+'"> 
        <input type="button" id="add_kid()" onClick="addKid()" value="+" /> 
       </div> 

然后，如果我在第一个领域使用萤火虫，我得到这个。

<input id="child_1" type="text" name="child[]"> 
<input id="ages_1" type="text" name="ages[]"> 

在我的额外添加的字段我得到这个与萤火虫。

<input type="text" name="child_2"> 
<input type="text" name="ages_2"> 

我错过了ID的，我怎么能添加ID到额外添加的字段，像这样。

<input id="child_2" type="text" name="child_2"> 
<input id="ages_2" type="text" name="ages_2"> 

如果我可以用按钮组成5个额外的字段，他们每个人如何得到这样的id。

<input id="child_3" type="text" name="child_3"> 
<input id="ages_3" type="text" name="ages_3"> 
. 
<input id="child_4" type="text" name="child_4"> 
<input id="ages_4" type="text" name="ages_4"> 
. 
<input id="child_5" type="text" name="child_5"> 
<input id="ages_5" type="text" name="ages_5"> 

Answer 1

在你addKid()循环，你不会为每个新追加的孩子指定的ID。为了得到这个工作，修改innerHTML线包括ID：

div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" > Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">'; 

现在，新创建的元素将追加到他们太多的ID。