empty()
empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了 指定元素中的所有子節點。
<body> <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>
remove()
remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
<body> <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> <script type="text/javascript"> $("button:first").on('click', function() { //刪除整個 class=test1的div節點 $(".test1").remove() }) </script> </body>
remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點
<body> <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> <script type="text/javascript"> $("button:last").on('click', function() { //找到所有p元素中，包含了3的元素 //這個也是一個過濾器的處理 $("p").remove(":contains('3')") }) </script> </body>
detach()
如果我們希望臨時刪除頁面上的節點，但是又不希望節點上的數據與事件丟失，並且能在下一個時間段讓這個刪除的節點顯示到頁面，這時候就可以使用detach方法來處理
