首页 > Web开发 > 详细

jQuery实现div复制

时间:2014-07-22 22:57:05      阅读:422      评论:0      收藏:0      [点我收藏+]

页面源码:

</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>

效果如下:

bubuko.com,布布扣

点击“+”按钮,复制一个“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复制

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!