jQuery DOM 節(jié)點刪除
remove與empty一樣,都是移除元素的方法,但是remove會將元素自身移除,同時也會移除元素內(nèi)部的一切,包括綁定的事件及與該元素相關的jQuery數(shù)據(jù)。
例如一段節(jié)點,綁定點擊事件
<div class="hello"> <p>php中文網(wǎng)</p> </div> $('.hello').on("click",fn)
如果不通過remove方法刪除這個節(jié)點其實也很簡單,但是同時需要把事件給銷毀掉,這里是為了防止"內(nèi)存泄漏",所以前端開發(fā)者一定要注意,綁了多少事件,不用的時候一定要記得銷毀
通過remove方法移除div及其內(nèi)部所有元素,remove內(nèi)部會自動操作事件銷毀方法,所以使用使用起來非常簡單
//通過remove處理 $('.hello').remove() //結(jié)果:<div class="hello"><p>php中文網(wǎng)</p></div> 全部被移除 //節(jié)點不存在了,同事事件也會被銷毀
remove表達式參數(shù):
remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合,可以選擇性的刪除指定的節(jié)點
我們可以通過$()選擇一組相同的元素,然后通過remove()傳遞篩選的規(guī)則,從而這樣處理
對比右邊的代碼區(qū)域,我們可以通過類似于這樣處理
$("p").filter(":contains('3')").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> .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節(jié)點 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中,包含了3的元素 //這個也是一個過濾器的處理 $("p").remove(":contains('3')") }) </script> </body> </html>