首先我们看一下有什么方法可以用。

jQuery - 添加元素

jQuery - 删除元素

例子1

好，我们下面举个粟子，就以添加一个上传的项为例。

第一步先做个表单

    <div class="row-fluid">
        <div class="span5">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon"> <i class="icon-align-justify"></i> </span>
                    <h5>Box标题</h5>
                </div>
                <div class="widget-content nopadding">
                    <form action="/Upload/Up1_Handle" method="POST" class="form-horizontal" enctype="multipart/form-data">
                        <div tag="group-parent">
                            <div class="control-group">
                                <label class="control-label">头像 :</label>
                                <div class="controls">
                                    <input type="file" name="files" class="span5" placeholder="请选择图片">
                                    <a href="#" class="btn btn-mini btn-info" tag="add"> + </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-success">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

备注：这里我们form里面的第一个 div做了一个自定义属性  tag="group-parent"，还有一个添加内容的按钮 <a href="#" class="btn btn-mini btn-info" tag="add"> + </a>

我们点击按钮就在group-parent的结尾插入内容。

第二步写上控制的js

    <script>
        $(document).ready(function () { 
            var taghtml = "<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"files\" class=\"span5\" placeholder=\"请选择图片\"><a href=\"#\" class=\"btn btn-mini btn-danger remove\"> - </a></div></div>";
            //添加内容 
            $("[tag='add']").click(function () {
                $("[tag='group-parent']").append($html); 
                //删除内容 
                $(".remove").click(function () {
                    $(this).parent().parent().remove();
                });
            });
        });
    </script>

备注： 上面的 taghtml就是我们要添加的内容，因为刚才我们在容器里面做了自定义属性  tag="group-parent"，我们使用$("[tag='group-parent']")就可以选择到容器了。

然后把要添加的内容apped到容器的结尾处就行。

例子2

有时候强迫症发了，我们可能不想在增加一个group-parent的div，我们可以用after()的方法在被选元素之后插入内容。

如果添加的内容只能添加一次，我们可以将内容保存为一个对象。$html = $("");

    <script>
        $(document).ready(function () { 
            $html = $("<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"files\" class=\"span5\" placeholder=\"请选择图片\"><a href=\"#\" class=\"btn btn-mini btn-danger remove\"> - </a></div></div>");
            //添加内容 
            $("[tag='add']").click(function () {
                $(this).parent().after(taghtml);
                //删除内容 
                $(".remove").click(function () {
                    $html.remove();
                });
            });
        });
    </script>

效果

下面贴个效果