jQuery 动态添加表单域，删除表单域答案

【问题标题】：jQuery Dynamic Add Form Field, Remove Form FieldjQuery 动态添加表单域，删除表单域
【发布时间】：2013-09-23 05:41:08
【问题描述】：

您好，我在从本教程中获得灵感后尝试添加新表单域和删除表单域 - http://bootsnipp.com/snipps/dynamic-form-fields

我当前的问题是按时间顺序删除并重置 all 的值。

<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
           <label class="control-label" for="field1">Nice Multiple Form Fields</label>
           <div class="controls" id="profs"> 
             <div class="input-append">
               <input autocomplete="off" class="span3" id="field1" name="prof1" type="text" placeholder="Type something (it has typeahead too)" data-provide="typeahead" data-items="8" 
data-source='["Aardvark","Beatlejuice","Capricorn","Deathmaul","Epic"]'/><button id="b1" onClick="addFormField()" class="btn btn-info" type="button">+</button>
             </div>
             <br /><small>Press + to add another form field :)</small>
           </div>
         </div>

Javascript :-

var next = 1;

function addFormField(){
    var addto = "#field" + next;
    next = next + 1;
    var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8"><button id="b1" onClick="$(this).parent().remove();" class="btn btn-info" type="button">+</button>';
    var newInput = $(newIn);
    $(addto).after(newInput);
    $("#field" + next).attr('data-source',$(addto).attr('data-source'));
    $("#count").val(next);  
}

父元素被删除，但下一个计数器未正确重置。以隐藏和所有新创建的形式：-

仅添加演示：- http://bootsnipp.com/snipps/dynamic-form-fields

添加一个带有错误的删除演示：- http://jsfiddle.net/6dCrT/2/

谁能帮帮我。

谢谢

【问题讨论】：

看来，jsfiddle.net/6dCrT/2 唯一的问题是删除时没有删除
，导致很多
，因此在最后一个表单输入字段之前留有空间。

标签： javascript jquery html forms twitter-bootstrap

【解决方案1】：

试试：

function addFormField(){
    var addto = "#field" + next;
    next = next + 1;
    var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8"><button id="b'+next+'" onClick="$(this).prev().remove();$(this).remove();" class="btn btn-info" type="button">-</button>';
    var newInput = $(newIn);
    console.log(addto);
    $(addto).after(newInput);
    if(next>1)
        $("button#b"+next).after(newInput);
    $("#field" + next).attr('data-source',$(addto).attr('data-source'));
    $("#count").val(next);  
}

DEMO FIDDLE

【讨论】：

但字段值未重置。添加 3 个字段并删除 2 个其他字段后.. 下一个字段仍然带有数字 'field4' :(
@JohnyBravo 为什么要即时更改 id、name 等元素属性？您仍然可以解析父 div 中的所有输入。
请原谅我的菜鸟，你能解释一下你的意思吗？
为什么要重置下一个字段？如果您重置下一个字段，您需要在 html 中重置元素 id，以确保您没有重复的 id。

【解决方案2】：

在我的示例中，我正在构建一个表单，如果用户有不止一只狗，则该表单将允许用户添加多个输入名称。

    var counter = 0
    jQuery(function () {
      $(".newDog").click(function(){
        counter ++;
        if (counter < 4) {
          var elem = $("<input/>",{
            type: "text",
            name: `dogname${counter}`
        });
        } else {
          alert("You can only add 4 Dog Names")
        }
        
        var removeLink = $("<span/>").html("X").click(function(){
            $(elem).remove();
            $(this).remove();
            counter --;
        });
        
        $(".dogname-inputs").append(elem).append(removeLink);
    });
    })

https://stackoverflow.com/users/714969/kevin-bowersox 提到的完整信用

【讨论】：