删除元素有两种方法
remove()：删除被选元素（及其子元素）
empty()：从被选元素中删除子元素
remove（）代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>删除元素</title> <style> p{ cursor: pointer; } </style> </head> <body> <p>这是一个段落，点击此处将会删除这段文字</p> <!-- <ul id="box"> <li>li1</li> <li class="lis">li2</li> <li class="lis">li3</li> </ul> --> <script src="../jquery-3.6.0.js"></script> <script> $1(document).ready(function(){ $('p').click(function(){ this.remove(); }); }) </script> </body> </html>
当点击了p段落时，p元素会被删除
效果如下图：
remove方法也可以用于过滤被删除的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>empty()</title> <style> #box{ margin: 0; padding: 0; width: 200px; height: 100px; background-color: burlywood; border: 1px solid black; margin-bottom: 10px; } #box li{ box-sizing: border-box; padding-top: 10px; text-align: center; list-style: none; } </style> </head> <body> <ul id="box"> <li>li1</li> <li class="lis">li2</li> <li class="lis">li3</li> </ul> <button>当点击按钮时清空li</button> <script src="../jquery-3.6.0.js"></script> <script> $(document).ready(function(){ $('button').click(function(){ $('li').remove('.lis'); }) }) </script> </body> </html>
过滤效果如下：
empty()：从被选元素中删除其中的子元素
将此代码引入上方代码段即可
$('button').click(function(){ $('#box').empty(); })
注意：是从被选中元素中删除其中的 子元素
效果如下：
