要用到移除指定元素的時候,jQuery提供了empty()與remove([expr])二個方法,兩個都是刪除元素,但是兩者還是有區別
empty方法
嚴格地講,empty()方法不是刪除節點,而是清空節點,它能清空元素中的所有後代節點
empty不能刪除自己這個節點
remove方法
節點與該節點所包含的所有後代節點將同時刪除
提供傳遞篩選的表達式,刪除指定集合中的元素
下面我們將用程式碼來詳細剖析
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>remove()与empty()的区别</title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style type="text/css"> #dv1{ width:250px; height:250px; background:red; float:left; } #dv2{ width:250px; height:250px; background:green; float: left; margin-left:5px; margin-right:5px; } </style> </head> <body> <div id="dv1"> <p>元素1</p> <p>元素2</p> </div> <div id="dv2"> <p>元素3</p> <p>元素4</p> </div> <input type="button" value="empty" id="but1"> <input type="button" value="remove" id="but2"> <script> $("#but1").click(function(){ $("#dv1").empty(); }) $("#but2").click(function(){ $("#dv2").remove(); }) </script> </body> </html>
如上程式碼,我們運行之後可以看到,當我點擊empty時,會把元素1 元素2 給清空掉,但是div 還是存在的
當我點擊remove 時,不僅裡面的元素會被刪除,而且自身的div也會被刪除掉