一：empty()方法刪除節點
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Jquery/jquery-3.3.1.js"></script>
<style>
div {
background: #bbffaa;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<h2>通過empty移除元素</h2>
<div id="test">
<p>p元素1</p>
<p>p元素2</p>
</div>
<button>點擊通過jQuery的empty移除元素</button>
<script type="text/javascript">
/**
* empty()只會清空該節點下的子 節點，但本身不會刪除
*/
$("button").on('click', function() {
//通過empty移除了當前div元素下的所有p元素
//但是本身id=test的div元素沒有被刪除！！！！！！
$("#test").empty()
})
</script>
</body>
</html>
二：remove方法刪除
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Jquery/jquery-3.3.1.js"></script>
<style>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<h2>通過jQuery remove方法移除元素</h2>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
<button>通過點擊jQuery的remove移除元素</button>
<button>通過點擊jQuery的remove移除指定元素</button>
<script type="text/javascript">
/**
* 刪除節點時需要把事件給銷毀掉，這里是為了防止"內存泄漏"
* remove內部會自動操作事件銷毀方法
**/
$("button:first").on('click', function() {
//刪除整個 class=test1的div節點
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//這個也是一個過濾器的處理
$("p").remove("p:contains('3')")//傳入帶參數的，可以散出指定元素
})
</script>
</body>
</html>