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