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. 效果圖
?
總結
- 上一篇： 004_Ajax服务器响应
- 下一篇： 013_替换元素