Bootstrap表单动态添加带有字段的删除表单

Question

我有一个Bootstrap水平表单（具有多个字段），并且希望将功能添加或删除一个或多个“子表单（具有多个字段）到父表单”。

另外，我不确定要走哪条路径，即使用Bootstrap组件编码，或者仅使用jQuery和CSS（在Bootstrap中）编码，或者仅使用JavaScript（在Bootstrap中）编码。

这可能是一个简单的问题，我一直在寻找一种解决方案，但是没有运气。 也许这很难做到。

发现这个，但没有帮助， 对如此的相似问题

这样，但是它是用JavaScript完成的关于SO的另一个问题

这是我要执行的操作的示例，我有一个包含个人详细信息字段的父表单，并且希望当用户单击按钮（+）时动态添加地址表单，并且如果按钮（-）为单击后，地址表格将被删除。

人

名字：

姓：

电子邮件：

按钮（+/-）

---

地址1

街：

市郊：

邮编：

---

地址2

街：

市郊：

邮编：

Answer 1

我做的事情就像您在与剑道谈论。 基本上，您需要一个模板并添加/删除项目功能。 使用任何模板功能，您都可以定义模板，并基于JSON对象动态生成模板，然后将其添加到DOM树中，或者使用jQuery从DOM树中删除现有项。

Answer 2

模板是一个很好的选择，可能是您应该采用的方式。 但是，如果要避免添加模板引擎，则可以使用jQuery，甚至可以使用普通JS。

这是简单的JQuery示例：

  $(function () {
    function createGroup(name) {
        var label = document.createElement("label");
        $label = $(label);
        $label.attr("for", name)
            .text(name);

        var input = document.createElement("input");
        $input = $(input);
        $input.addClass("form-control")
            .attr("type", "text")
            .attr("name", name);

        var group = document.createElement("div");
        $group = $(group);
        $group.addClass("form-group")
            .append(label, input);

        return group;
    }

    $("#plusButton").click(
        function () {
            var newHorizontalForm = document.createElement("div");
            $(newHorizontalForm).append(createGroup("New Input"),
                    createGroup("New Input"),
                    createGroup("New Input"))
                .addClass("form-horizontal");
                $("#form").append(newHorizontalForm);
    });


     $("#minusButton").click(
            this.parent.remove();
        });

});