jQuery實現div複製

標籤：blog   http   width   io   2014   for   

頁面源碼：

</div>
<div class="condition">
<select class="select">
<c:forEach var="field" items="${fields}">
<option class="option" id="${field}"></option>
</c:forEach>
</select> <input name="text" type="text" class="searchvalue"/>
<button class="add">+</button>
<button class="remove">-</button>
</div>

效果如下：

點擊“+”按鈕，複製一個“condition”div,點擊“-”按鈕移除當前div，jQuery實現代碼：

$(document).ready(
function() {
//添加選項
$(".add").click(function() {
var sourceDiv = $(this).parent();//擷取要複製的節點
var duplicate = sourceDiv.clone(true);
//將文本清空
duplicate.find("input[name=‘text‘]")[0].value = "";
duplicate.insertAfter(sourceDiv);
});

//刪除按鈕
$(".remove").click(function() {
var soureDiv = $(this).parent();//擷取要移除的節點
//如果只有一個則不移除
if ($(".condition").length != 1) {
soureDiv.remove();
}
});

});