溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“jquery如何移除dom元素”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“jquery如何移除dom元素”吧！
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("歡迎來到億速云！")
});
$("#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 元素都會彈出一個對話框。在我們點擊【刪除】按鈕后，<li>jQuery</li> 這一項就會被添加到 ul 元素內部的末尾處。
但是這個時候，如果再去點擊 <li>jQuery</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如何移除dom元素”的內容了，經過本文的學習后，相信大家對jquery如何移除dom元素這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
