JQuery:刪除元素
通過 jQuery，可以很容易地刪除已有的 HTML 元素、刪除元素/內容。
如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
1、jQuery remove() 方法
jQuery remove() 方法刪除被選元素及其子元素。
實例：$("#div1").remove();
代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>JQuery的使用！！！</title> <script src="jquery-3.1.0.js"></script> <script> $(document).ready(function(){ //刪除div元素 $("button").click(function(){ $("#div").remove(); }); }); </script> </head> <body> <div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center"> 這是div中的一些文本 <p>這是div中一行段落</p> <p>這是div中另一行段落</p> </div><br> <button>刪除div元素</button> </body> </html>
2、jQuery empty() 方法
jQuery empty() 方法刪除被選元素的子元素。
實例：$("#div1").empty();
代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>JQuery的使用！！！</title> <script src="jquery-3.1.0.js"></script> <script> $(document).ready(function(){ //清空div元素 $("button").click(function(){ $("#div").empty(); }); }); </script> </head> <body> <div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center"> 這是div中的一些文本 <p>這是div中一行段落</p> <p>這是div中另一行段落</p> </div><br> <button>清空div元素</button> </body> </html>
3、過濾被刪除的元素
jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。
該參數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 <p> 元素：
實例：$("p").remove(".italic");
代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>JQuery的使用！！！</title> <script src="jquery-3.1.0.js"></script> <script> $(document).ready(function(){ //移除所有class="italic"的p元素 $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center"> 這是div中的一些文本 <p class="italic">這是div中一行段落</p> <p class="italic">這是div中另一行段落</p> </div><br> <button>移除所有class="italic"的p元素</button> </body> </html>
