jQuery之删除元素

谁借莪１个温暖的怀抱￠ 2022-04-05 04:28 313阅读 0赞

任务描述

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

![206616][]

相关知识

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

基本的html结构如下：

1.  `<button class="btn">删除内容</button>`
2.  `<div class="box">`
3.  `<p class="com first">我是第一行</p>`
4.  `<p class="com second">我是第二行</p>`
5.  `<p class="third" id="item">我是第三行</p>`
6.  `</div>`

效果图如下：

![206584][]

remove()

需要实现的效果如下：

![206585][]

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

1.  `$(".btn").click(function(){`
2.  `$(".box").remove();`
3.  `})`

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

empty()

需要实现的效果如下：

![206586][]

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

1.  `$(".btn").click(function(){`
2.  `$(".box").empty();`
3.  `})`

可以看出：`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>

![206616][]

[206616]: https://educoder.trustie.net/attachments/download/206616
[206584]: https://educoder.trustie.net/attachments/download/206584
[206585]: https://educoder.trustie.net/attachments/download/206585
[206586]: https://educoder.trustie.net/attachments/download/206586