當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

012_删除元素

發布時間：2025/4/17 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 012_删除元素小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. remove()方法

1.1. remove()方法移除每一個匹配元素, 包括所有文本和子節點。

1.2. remove()方法還同時刪除被選元素及其子元素的綁定事件。這一點與detach()不同。

1.3. remove()方法可以返回所有匹配的元素。

1.4. 語法

$(selector).remove()

1.5. 過濾被刪除的元素

1.5.1. remove()方法也可接受一個參數, 允許您對被刪元素進行過濾。

1.5.2. 該參數可以是任何jQuery選擇器的語法。

1.5.3. 下面的例子刪除class="italic"的所有<p>元素:

$("p").remove(".italic");

1.6. 例子

1.6.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>remove刪除元素</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){var removeObj;$('#btn1').click(function(){removeObj = $("div").remove();});$('#btn2').click(function(){$("div").remove("#div2");});$('#btn3').click(function(){if(removeObj) {$("body").append(removeObj);removeObj = null;}});$('#div1').mouseover(function(){$(this).css({"font-size": "2em"});});$('#div1').mouseleave(function(){$(this).css({"font-size": "1em"});});});</script></head><body><div id="div1" style="background-color: red; width: 600px; height: 100px"><p>remove()方法移除每一個匹配元素, 包括所有文本和子節點。</p></div><div id="div2" style="background-color: green; width: 600px; height: 100px"><p>remove()方法也可接受一個參數, 允許您對被刪元素進行過濾。</p></div> <br /><button id="btn1">remove刪除元素</button> <button id="btn2">remove過濾被刪除的元素</button><button id="btn3">添加remove刪除的元素</button></body> </html>

1.6.2. 效果圖

2. detach()方法

2.1. detach()方法移除每一個匹配元素, 包括所有文本和子節點。

2.2. detach()方法保留被選元素及其子元素的綁定事件。這一點與remove()不同。

2.3. detach()方法可以返回所有匹配的元素。

2.4. 語法

$(selector).detach()

2.5. 過濾被刪除的元素

2.5.1. detach()方法也可接受一個參數, 允許您對被刪元素進行過濾。

2.5.2. 該參數可以是任何jQuery選擇器的語法。

2.5.3. 下面的例子刪除class="italic"的所有<p>元素:

$("p").detach(".italic");

2.6. 例子

2.6.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>detach刪除元素</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){var detachObj;$('#btn1').click(function(){detachObj = $("div").detach();});$('#btn2').click(function(){$("div").detach("#div2");});$('#btn3').click(function(){if(detachObj) {$("body").append(detachObj);detachObj = null;}});$('#div1').mouseover(function(){$(this).css({"font-size": "2em"});});$('#div1').mouseleave(function(){$(this).css({"font-size": "1em"});});});</script></head><body><div id="div1" style="background-color: red; width: 600px; height: 100px"><p>detach()方法移除每一個匹配元素, 包括所有文本和子節點。</p></div><div id="div2" style="background-color: green; width: 600px; height: 100px"><p>detach()方法也可接受一個參數, 允許您對被刪元素進行過濾。</p></div> <br /><button id="btn1">detach刪除元素</button> <button id="btn2">detach過濾被刪除的元素</button><button id="btn3">添加detach刪除的元素</button></body> </html>

2.6.2. 效果圖

3. empty()方法

3.1. empty()方法刪除每一個匹配元素的所有子元素。

3.2. 語法

$(selector).empty()

3.3. 例子

3.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>empty刪除元素</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").empty();});});</script></head><body><div style="background-color: red; width: 600px; height: 80px"><p>empty()方法刪除每一個匹配元素的所有子元素。</p><p>empty()方法刪除每一個匹配元素的所有子元素。</p></div> <div style="background-color: green; width: 600px; height: 80px"><p>empty()方法刪除每一個匹配元素的所有子元素。</p><p>empty()方法刪除每一個匹配元素的所有子元素。</p></div><br /><button id="btn1">empty刪除元素</button> </html>

3.3.2. 效果圖

總結

以上是生活随笔為你收集整理的012_删除元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

元素