jQuery实现div复制

最新推荐文章于 2024-07-26 03:35:23 发布

SOHOxqy

最新推荐文章于 2024-07-26 03:35:23 发布

阅读量1.1k

点赞数

文章标签： jquery js javascript html

本文链接：https://blog.csdn.net/SOHOxqy/article/details/114022631

版权

这篇博客介绍了如何使用jQuery实现动态DOM操作，包括点击‘+’按钮时复制并插入一个‘condition’类的div，以及点击‘-’按钮时移除当前div。示例代码展示了如何选取父节点、克隆、清空输入值以及插入和删除DOM元素的细节。

摘要由CSDN通过智能技术生成

jQuery实现div复制

页面源码html：

</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实现代码：

页面JS:

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