Web开发——JavaScript库（jQuery HTML——添加/删除 续，需要整合在一起）
Posted zyjhandsome
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 <!----> 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 <div1> 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 <!----> 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 <div1> 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 <!----> 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 <p> element</button> 29 30 </body> 31 </html>
以上是关于Web开发——JavaScript库（jQuery HTML——添加/删除 续，需要整合在一起）的主要内容，如果未能解决你的问题，请参考以下文章
Web开发——JavaScript库（jQuery遍历——后代）
Web开发——JavaScript库（jQuery遍历——同胞）
Web开发——JavaScript库（jQuery效果——动画/停止动画）