jq动态添加节点及删除节点

最新推荐文章于 2022-03-31 19:02:47 发布

Bel_Ami@

最新推荐文章于 2022-03-31 19:02:47 发布

阅读量2.4k

点赞数 1

文章标签： jq js html php jquery

本文链接：https://blog.csdn.net/Bel_Ami_n/article/details/89227929

版权

PHP 同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

很好用，简单明了，所以先收藏了。

<!DOCTYPE html>
<html lang="zh">
	<!-- head部分 -->
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<!--需要引入jq-->
		<script src="js/jquery-1.8.3.min.js"></script>
		<title>Document</title>
		<style type="text/css">
			.bigBox{
			border:1px solid black;
			}
			.inputDiv{
			border:1px solid red;
			}
		</style>
	</head>
	
	<!-- body部分 -->
	<body>
		<button type="button" class="addBtn">增加</button>
		<div class="bigBox">
			<div class="inputDiv">
				<input type="text" placeholder="0"/>
				<button type="button" class="delBtn">删除</button>
			</div>
		</div>
	</body>
	
	<!-- jq部分 -->
	<script type="text/javascript">
	
		//用于区分
		var flag=0;
		
		//点击事件append
		$(".addBtn").on("click",function(){
			flag++;
			var html='<div class="inputDiv"><input type="text" placeholder='+flag+'> <button class="delBtn">删除</button></div>'
			$(".bigBox").append(html);
			delDivFn(".delBtn");
		})
		
		//删除当前节点的父节点，若与需求有出入，按照思路找到当前节点与需要删除的节点关系即可删除
		function delDivFn(dom){
			$(dom).on("click",function(){
				$(this).parent().remove();
			})
		}
		delDivFn(".delBtn");
		
	</script>
</html>

Bel_Ami@

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jq动态添加节点及删除节点

很好用，简单明了，所以先收藏了。<!DOCTYPE html><html lang="zh">  <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal...
复制链接

扫一扫