Web开发——JavaScript库（jQuery HTML——添加/删除续，需要整合在一起）

2、jQuery - 删除元素/内容

　　通过 jQuery，可以很容易地删除已有的 HTML 元素。

　　如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

2.1 jQuery remove() 方法

　　jQuery remove() 方法删除被选元素及其子元素。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <!--寮曠敤jQuery搴擄紝src鍙互鐩存帴鎸囧悜鏈湴涓嬭浇鐨刯Qery搴?->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12         <script type="text/javascript">
13 
14             $(document).ready(function(){
15                 $("button").click(function(){
16                     $("#div1").remove();
17                 });
18             });
19                 
20         </script>
21     </head>
22     
23     <body>
24     
25         <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
26         This is some text in the div.
27         <p>This is a paragraph in the div.</p>
28         <p>This is another paragraph in the div.</p>
29         </div>
30 
31         <br>
32         <button>delete &lt;div1&gt; element</button>
33 
34     </body>
35 </html>

　　输出结果：略

2.2 jQuery empty() 方法

　　jQuery empty() 方法删除被选元素的子元素。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <!--寮曠敤jQuery搴擄紝src鍙互鐩存帴鎸囧悜鏈湴涓嬭浇鐨刯Qery搴?->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12         <script type="text/javascript">
13 
14             $(document).ready(function(){
15                 $("button").click(function(){
16                     $("#div1").empty();
17                 });
18             });
19                 
20         </script>
21     </head>
22     
23     <body>
24     
25         <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
26         This is some text in the div.
27         <p>This is a paragraph in the div.</p>
28         <p>This is another paragraph in the div.</p>
29         </div>
30 
31         <br>
32         <button>empty &lt;div1&gt; element</button>
33 
34     </body>
35 </html>

　　输出结果：略

2.3 过滤被删除的元素

　　jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

　　该参数可以是任何 jQuery 选择器的语法。

　　下面的例子删除 class="italic" 的所有 <p> 元素：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <!--寮曠敤jQuery搴擄紝src鍙互鐩存帴鎸囧悜鏈湴涓嬭浇鐨刯Qery搴?->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12         <script type="text/javascript">
13 
14             $(document).ready(function(){
15                 $("button").click(function(){
16                     $("p").remove(".italic");
17                 });
18             });
19                 
20         </script>
21     </head>
22     
23     <body>
24     
25         <p>This is a paragraph in the div.</p>
26         <p class="italic"><i>This is another paragraph in the div.</i></p>
27         <p class="italic"><i>This is another paragraph in the div.</i></p>
28         <button>delete class="italic" of &lt;p&gt; element</button>
29 
30     </body>
31 </html>

Web开发——JavaScript库（jQuery HTML——添加/删除 续，需要整合在一起）

2、jQuery - 删除元素/内容

2.1 jQuery remove() 方法

2.2 jQuery empty() 方法

2.3 过滤被删除的元素

猜你喜欢

Web开发——JavaScript库（jQuery HTML——添加/删除续，需要整合在一起）