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();
}
});

});

jQuery实现div复制,布布扣,bubuko.com

jQuery实现div复制

标签：blog   http   width   io   2014   for   

原文地址：http://www.cnblogs.com/xuyadong/p/3848718.html