如何动态添加和删除多个字段？

Question

在 JQuery 中是否有一种更简单的方法可以为同一表单中的多个字段动态添加和删除字段？我在同一个表单中有两个表单元素，我希望它们能够添加和删除空白字段。

<div class="col-sm-3">
    Email<g:field type="email" name="Email" class="form-control" required="" value="" aria-labelledby="Email-label"/>
</div>
<div class="col-sm-2">  
    Fax<g:field type="tel" name="Fax" class="form-control" required="true" value="" aria-labelledby="Fax-label"/>
</div>

我从几个不同的地方拼凑了这个 javascript 片段，它在第一个字段中工作得很好，但是当我尝试为第二个字段复制它时它不起作用。

$(document).ready(function(){
    $("#add").click(function (e) {
        $("#submitterEmail").append('<div><input type="text" name="submitterEmail[]"><button class="delete">Delete</button></div>');
    });

$("body").on("click", ".delete", function (e) {
    $(this).parent("div").remove();
});
});

Answer 1

这是基于您拥有的 HTML 的 JavaScript：

$(document).ready(function(){
    $("#add").on("click", function(){
        $("#container").append(
            "<div class='col-sm-3'><g:field>Another field <button class='delete'>Delete</button></div>"
        );
    });
    $(document).on("click", ".delete", function(){
        $(this).parent().parent().remove();
    });
});

Example