删除元素有两种方法
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();
})
注意：是从被选中元素中删除其中的 子元素
效果如下：
