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

<!DOCTYPE html>
<html lang="zh">
<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>
<button class="addBtn">增加</button>
<div class="bigBox">
<div class="inputDiv">
<input type="text" placeholder="0"/>
<button class="delBtn">删除</button>
</div>
</div>
</body>
<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>

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭