首页 > 代码库 > jQuery实现div复制

jQuery实现div复制

页面源码:

</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].valuehttp://www.mamicode.com/= "";
duplicate.insertAfter(sourceDiv);
});

//删除按钮
$(".remove").click(function() {
var soureDiv = $(this).parent();//获取要移除的节点
//如果只有一个则不移除
if ($(".condition").length != 1) {
soureDiv.remove();
}
});

});