jQuery - 删除元素

通过 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;width: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>
View Code

查看结果:

　　　　　　　　　　　　　　　　　　　

 

　

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;width: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>
View Code

查看结果:

　　　　　　　　　　

过滤被删除的元素

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>
View Code

查看结果:

　　　　　　　　　　　　

 

 

posted @ 2016-03-30 15:39  司会铭  阅读(191)  评论(0)    收藏  举报