jquery移除dom元素以:1、remove()方法,可將指定dom元素及其內部的所有內容刪除;2、detach()方法,可將指定dom元素及其內部所有內容刪除,但不會刪除綁定的事件;3、empty()方法,可移除指定後代dom元素。
本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
在 jQuery 中,想要刪除dom元素,我們有以下 3 種方法:remove()、detach( ) 和 empty( )。
1、remove()方法
remove( ) 方法可以刪除某個元素及其內部的所有內容。
$(selector).remove()
範例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(function () { $("#btn").click(function () { $("li:nth-child(4)").remove(); }) }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="删除" /> </body> </html>
$("li:nth-child(4)").remove()
表示刪除ul 元素下的第4個li 元素。記住,在jQuery 中,除了:nth-child() 和:nth-of-type() 這兩個選擇器的下標是從1 開始的,其他所有選擇器或jQuery 方法的下標都是從0 開始的。
2、detach( ) 方法
在jQuery 中,detach() 和remove() 的功能雖然相似,都是將某個元素及其內部所有內容刪除,但是兩者也有明顯的差異。
remove() 方法用於「徹底」刪除元素。所謂的“徹底”,指的是不僅會刪除元素,還會把元素綁定的事件刪除;
#detach() 方法用於“半徹底”刪除元素。所謂的“半徹底”,指的是只會刪除元素,不會刪除元素綁定的事件。
$(selector).detach()
範例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(function () { $("li").click(function () { alert("欢迎来到PHP中文网!") }); $("#btn").click(function () { var $li = $("li:nth-child(4)").detach(); $($li).appendTo("ul"); }); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="删除" /> </body> </html>
在這個範例中,我們為每個li 元素新增一個點擊事件,點擊任何一個li 元素都會彈出一個對話框。在我們點選【刪除】按鈕後,
但是這個時候,如果再去點擊
3、empty( )方法
#在jQuery 中,我們可以使用empty() 方法來「清空”某個後代元素。
$(selector).empty()
範例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(function () { $("#btn").click(function () { $("ul li:nth-child(4)").empty(); }); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="删除" /> </body> </html>
#【推薦學習:jQuery影片教學、web前端】
以上是jquery移除dom元素用的啥的詳細內容。更多資訊請關注PHP中文網其他相關文章!