本文主要為大家帶來一篇基於DOM節點刪除之empty和remove的差異(詳解)。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
要移除頁面上節點是開發者常見的操作,jQuery提供了幾種不同的方法用來處理這個問題,這裡我們開仔細了解下empty和remove方法
##empty顧名思義,清空方法,但是與刪除又有點不一樣,因為它只移除了指定元素中的所有子節點。 這個方法不只移除子元素(和其他後代元素),同樣移除元素裡的文字。因為,根據說明,元素裡任何文字字串都被看做是該元素的子節點。請看下面的HTML:<p class="hello"><p>这是p标签</p></p>
//通过empty处理 $('.hello').empty() //结果:<p>这是p标签</p>被移除 <p class="hello"></p>
<!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> p { background: #bbffaa; width: 300px; } </style> </head> <body> <h2>通过empty移除元素</h2> <p id="test"> <p>p元素1</p> <p>p元素2</p> </p> <button>点击通过jQuery的empty移除元素</button> <script type="text/javascript"> $("button").on('click', function() { //通过empty移除了当前p元素下的所有p元素 //但是本身id=test的p元素没有被删除 $("#test").empty() }) </script> </body> </html>
<p class="hello"><p>这是P段落</p></p> $('.hello').on("click",fn)
//通过remove处理 $('.hello').remove() //结果:<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁
<!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> <p class="test1"> <p>p元素1</p> <p>p元素2</p> </p> <p class="test2"> <p>p元素3</p> <p>p元素4</p> </p> <button>通过点击jQuery的empty移除元素</button> <button>通过点击jQuery的empty移除指定元素</button> <script type="text/javascript"> $("button:first").on('click', function() { //删除整个 class=test1的p节点 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中,包含了3的元素 //这个也是一个过滤器的处理 $("p").remove(":contains('3')") }) </script> </body> </html>
##嚴格地講,empty()方法不是刪除節點,而是清空節點,它能清空元素中的所有後代節點
#empty不能刪除自己這個節點
remove方法
該節點與該節點所包含的所有後代節點將同時被刪除
提供傳遞一個篩選的表達式,刪除指定合集中的元素
以上就是二者的區別,我們具體透過下邊程式碼部分加深理解
<!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> .left, .right { width: 300px; } .left p, .right p { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left p { background: #bbffaa; } .right p { background: yellow; } </style> </head> <body> <h2>通过empty与remove移除元素</h2> <p class="left"> <button id="bt1">点击通过jQuery的empty移除内部P元素</button> <button id="bt2">点击通过jQuery的remove移除整个节点</button> </p> <p class="right"> <p id="test1"> <p>p元素1</p> <p>p元素2</p> </p> <p id="test2"> <p>p元素3</p> <p>p元素4</p> </p> </p> <script type="text/javascript"> $("#bt1").on('click', function() { //删除了2个p元素,但是本着没有删除 $("#test1").empty() }) $("#bt2").on('click', function() { //删除整个节点 $("#test2").remove() }) </script> </body> </html>
相關推薦:
以上是實例詳解基於DOM之empty和remove的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!