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>

然后如果我在第一个字段上使用firebug，我就会得到它。

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

在我添加的额外字段中，我使用了firebug。

<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。

添加/删除缺少ID的字段

1 个答案: