通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("#div1").remove(); 9 }); 10 }); 11 </script> 12 </head> 13 14 <body> 15 16 <div id="div1" style="height:100px;300px;border:1px solid black;background-color:yellow;"> 17 This is some text in the div. 18 <p>This is a paragraph in the div.</p> 19 <p>This is another paragraph in the div.</p> 20 </div> 21 22 <br> 23 <button>删除 div 元素</button> 24 25 </body> 26 </html>
查看结果:
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("#div1").empty(); 9 }); 10 }); 11 </script> 12 </head> 13 14 <body> 15 16 <div id="div1" style="height:100px;300px;border:1px solid black;background-color:yellow;"> 17 This is some text in the div. 18 <p>This is a paragraph in the div.</p> 19 <p>This is another paragraph in the div.</p> 20 </div> 21 22 <br> 23 <button>清空 div 元素</button> 24 25 </body> 26 </html>
查看结果:
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("p").remove(".italic"); 9 }); 10 }); 11 </script> 12 </head> 13 14 <body> 15 16 <p>This is a paragraph in the div.</p> 17 <p class="italic"><i>This is another paragraph in the div.</i></p> 18 <p class="italic"><i>This is another paragraph in the div.</i></p> 19 <button>删除 class="italic" 的所有 p 元素</button> 20 21 </body> 22 </html>
查看结果:
