首先我們看一下有什麼方法可以用。

jQuery - 新增元素

新增新的 HTML 內容

我們將學習用於新增新內容的四個 jQuery 方法：

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容
• before() - 在被選元素之前插入內容

jQuery - 刪除元素

刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

例子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>
 

我們點選按鈕就在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>
 

然後把要新增的內容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>

效果

下面貼個效果