收藏
批改状态：合格
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.元素的删除与内容清空操作</title>
<style type="text/css">
.hot {background-color: cyan;}
.top {background-color: wheat;}
li {width: 300px;}
</style>
</head>
<body>
<ul>
<li><a href="">PHP中文网2018年最新教学视频01</a></li>
<li><a href="">PHP中文网2018年最新教学视频02</a></li>
<li class="hot"><a href="">PHP中文网2018年最新教学视频03</a></li>
<li class="hot"><a href="">PHP中文网2018年最新教学视频04</a></li>
<li class="hot"><a href="">PHP中文网2018年最新教学视频05</a></li>
<li><a href="">PHP中文网2018年最新教学视频06</a></li>
<li><a href="">PHP中文网2018年最新教学视频07</a></li>
<li class="top"><a href="">PHP中文网2018年最新教学视频08</a></li>
<li class="top"><a href="">PHP中文网2018年最新教学视频09</a></li>
<li class="top"><a href="">PHP中文网2018年最新教学视频10</a></li>
</ul>
<button>remove()删除浅蓝色背景的元素</button>
<button>empty()清空浅黄色背景的元素</button>
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
$('li').filter('.hot').remove()
//remove()若有参数，参数则是选择器
//删除第四个li标签之后所有带hot样式的标签及内容：
// $('li:eq(3)').filter('.hot').remove()
//依次删除所有li标签
// $('li:eq(0)').remove()
//依次删除第二个li标签之后的所有li标签及内容
// $('li:eq(1)').remove()
})
// $('button').eq(0).next().on('click',function(){
$('button').eq(1).on('click',function(){
$('li').filter('.top').empty() //清空所有带top样式的标签及内容
//删除并清空所有带top样式的标签及内容
$('li').filter('.top').empty().remove()
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
