Javascript 引导窗体使用字段动态添加或删除窗体

我有一个引导水平表单（有许多字段），希望能够向父表单添加/删除一个或多个子表单（有许多字段）

另外，我也不确定该走哪条路，即使用引导组件编写代码，或者纯粹使用jQuery和CSS（在引导中）编写代码，或者只使用JavaScript（在引导中）编写代码

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

找到了这个，但没有帮助

这是用JavaScript实现的

下面是我想做的一个示例，我有一个包含个人详细信息字段的父窗体，并且希望当用户单击按钮（+）时，动态添加地址窗体，如果单击按钮（-），则删除地址窗体

人

名字：

姓：

电邮：

按钮（+/-）

---

地址1

街道：

郊区：

邮政编码：

---

地址2

街道：

郊区：

---

邮政编码：

我做了一些类似于您与剑道讨论的事情。基本上，您需要一个模板和添加/删除项功能。使用任何模板功能，您都可以定义一个模板，并基于JSON对象动态生成模板，并将其添加到DOM树，或使用jQuery从DOM树中删除现有项.

模板是一个很好的选择，可能是您应该选择的方式。但是，如果您不想添加模板引擎，可以使用jQuery，甚至只是vanilla 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();
        });

});