要移除頁面上節點是開發者常見的操作,jQuery提供了幾種不同的方法用來處理這個問題,這里我們開仔細了解下empty和remove方法
empty 顧名思義,清空方法,但是與刪除又有點不一樣,因為它只移除了 指定元素中的所有子節點。
這個方法不僅移除子元素(和其他后代元素),同樣移除元素里的文本。因為,根據說明,元素里任何文本字符串都被看做是該元素的子節點。請看下面的HTML:
<div class="hello"><p>這是p標簽</p></div>
如果我們通過empty方法移除里面div的所有元素,它只是清空內部的html代碼,但是標記仍然留在DOM中
//通過empty處理$('.hello').empty()//結果:<p>這是p標簽</p>被移除<div class="hello"></div>通過empty移除了當前div元素下的所有p元素,但是本身id=test的div元素沒有被刪除
<!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> div { background: #bbffaa; width: 300px; } </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"> $("button").on('click', function() { //通過empty移除了當前div元素下的所有p元素 //但是本身id=test的div元素沒有被刪除 $("#test").empty() }) </script></body></html>remove與empty一樣,都是移除元素的方法,但是remove會將元素自身移除,同時也會移除元素內部的一切,包括綁定的事件及與該元素相關的jQuery數據。
例如一段節點,綁定點擊事件
<div class="hello"><p>這是P段落</p></div>$('.hello').on("click",fn)如果不通過remove方法刪除這個節點其實也很簡單,但是同時需要把事件給銷毀掉,這里是為了防止"內存泄漏",所以前端開發者一定要注意,綁了多少事件,不用的時候一定要記得銷毀
通過remove方法移除div及其內部所有元素,remove內部會自動操作事件銷毀方法,所以使用使用起來非常簡單
//通過remove處理$('.hello').remove()//結果:<div class="hello"><p>這是P段落</p></div> 全部被移除 //節點不存在了,同事事件也會被銷毀remove表達式參數:
remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合,可以選擇性的刪除指定的節點
新聞熱點
疑難解答
圖片精選