jQuery之删除元素

最新推荐文章于 2023-03-10 15:07:49 发布

Andone_hsx

最新推荐文章于 2023-03-10 15:07:49 发布

阅读量935

点赞数 1

分类专栏： JavaScript基础文章标签： jQuery DOM操作删除元素

本文链接：https://blog.csdn.net/Andone_hsx/article/details/84946978

版权

JavaScript基础专栏收录该内容

19 篇文章 8 订阅

订阅专栏

任务描述

本关任务：用jQuery删除元素。效果如下：

相关知识

为了完成本关任务，你需要掌握：1.remove()，2.empty()。

基本的html结构如下：

<button class="btn">删除内容</button>
<div class="box">
<p class="com first">我是第一行</p>
<p class="com second">我是第二行</p>
<p class="third" id="item">我是第三行</p>
</div>

效果图如下：

remove()

需要实现的效果如下：

如何删除类名为.box的元素呢？这里用remove()方法，实现代码如下：

$(".btn").click(function(){
$(".box").remove();
})

可以看出：remove()是删除被选元素及其子元素。

empty()

需要实现的效果如下：

如何只删除类名为.box的子元素呢？这里用empty()方法，实现代码如下：

$(".btn").click(function(){
$(".box").empty();
})

可以看出：empty()是只删除被选元素的子元素。

编程要求

根据提示，在右侧编辑器补充代码，实现删除元素的功能。要求如下：

点击【删除最后一行】，删除表格的最后一行；
点击【删除最后一个住址】，删除表格的最后一个住址；
获取最后一个用last()；

格式注意：

获取元素统一用类名获取；
统一用双引号""表示字符串；

效果如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr class="line">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th class="final">住址</th>
  </tr>
  <tr class="line">
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td class="final">北京</td>
  </tr>
  <tr class="line">
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td class="final">洛杉矶</td>
  </tr>
  <tr class="line">
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td class="final">上海</td> 
  </tr>
  <tr class="line">
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td class="final">河南</td>
  </tr>
</table>
<button class="btn1">删除最后一行</button>
<button class="btn2">删除最后一个住址</button>
    <script>
    //-----------begin-----------
    $(".btn1").click(function(){
    	$(".line").last().remove();
    })
    $(".btn2").click(function(){
    	$(".final").last().empty();
    })

    
    
    //------------end------------  
    </script>
    
</body>
</html>