Remove, like empty, is a method of removing elements, but remove will remove the element itself and everything inside the element, including bound events and jQuery data related to the element.
For example, for a node, bind a click event
<div class="hello">
<p>php中文网</p>
</div>
$('.hello').on("click",fn)It is actually very simple to delete this node without using the remove method, but at the same time, the event needs to be destroyed. This is to prevent "memory leaks" ", so front-end developers must pay attention to how many events are tied and remember to destroy them when not in use
Remove the div and all the elements inside it through the remove method. The event destruction method will be automatically operated inside remove, so It is very simple to use
//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>php中文网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁remove expression parameters:
The advantage of remove than empty is that you can pass a selector expression to filter the set of matching elements that will be removed. You can selectively delete specified nodes
We can select a group of the same elements through $(), and then pass the filtering rules through remove(), so as to process it like this
Compare the code on the right Area, we can process it like this
$("p").filter(":contains('3')").remove() Let’s write a sample code below, friends, let’s take a look at what kind of effect
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.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的empty移除元素</button>
<button>点击通过jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>
</html>
Next Section