<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery删除节点之empty</title>
<style type="text/css">
#box1{
background-color:lightskyblue;
}
#box2{
width:100px;
height:50px;
background-color:pink;
}
#box3{
width:60px;
height:25px;
background-color:yellow;
}
</style>
<script src="jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#box2").click(function(){
alert("触发了点击事件");
});
$("#btn1").click(function(){
$("#box2").detach();
});
$("#btn2").click(function(){
$("#box1").append("<div id='box2'><div id='box3'>12345</div></div>");
});
});
</script>
</head>
<body>
<p>文档的一行文字</p>
<div id="box1">
<p>div的第一个子元素</p>
<p>div的第二个子元素</p>
<div id="box2">
<div id="box3">12345</div>
</div>
</div>
<button id="btn1">我可以删除子元素哦</button>
<button id="btn2">我可以增加子元素哦</button>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<meta charset="UTF-8">
<title>jQuery删除节点之empty</title>
<style type="text/css">
#box1{
background-color:lightskyblue;
}
#box2{
width:100px;
height:50px;
background-color:pink;
}
#box3{
width:60px;
height:25px;
background-color:yellow;
}
</style>
<script src="jQuery/jquery-3.3.1.js"></script>
<script>
var b;
$(document).ready(function(){
$("#box2").click(function(){
alert("触发了点击事件");
});
$("#btn1").click(function(){
b = $("#box2").detach();
});
$("#btn2").click(function(){
$("#box1").append(b);
});
});
</script>
</head>
<body>
<p>文档的一行文字</p>
<div id="box1">
<p>div的第一个子元素</p>
<p>div的第二个子元素</p>
<div id="box2">
<div id="box3">12345</div>
</div>
</div>
<button id="btn1">我可以删除子元素哦</button>
<button id="btn2">我可以增加子元素哦</button>
</body>
</html>
定义一个全局变量就可以了