3-4 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现删除元素，鼠标移动到一个列表项上，显示删除按钮，点击按钮后，可以将其删除。

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、CSS添加li的鼠标效果，

提示: hover的时候，删除按钮显示，反之隐藏。
注意：初始状态删除按钮是隐藏的，鼠标移上去才显示。

二、定义删除函数del()，

提示:
1.del接收一个参数，为响应列表项的删除按钮元素
2.通过取得按钮的父元素来取得列表项。
3.在列表项的父元素调用removeChild方法。
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         li{
  8.             width: 100px;
  9.             height: 20px;
  10.             line-height:  20px;
  11.             position: relative;
  12.             margin: 10px;
  13.         }
  14.         button {
  15.             position: absolute;
  16.             right: 3px;
  17.             top: 1px;
  18.             height: 20px;
  19.             /* 隐藏深处按钮 */
  20.  
  21.         }
  22.         li:hover button {
  23.             /* 显示删除按钮 */
  24.         }
  25.     </style>
  26.     <script type="text/javascript">
  27.  
  28.         //定义按钮点击事件del，删除上级节点
  29.  
  30.     </script>
  31. </head>
  32. <body>
  33. <ul>
  34.     <li>内容1<button onclick="del(this)">删除</button></li>
  35.     <li>内容2<button onclick="del(this)">删除</button></li>
  36.     <li>内容3<button onclick="del(this)">删除</button></li>
  37.     <li>内容4<button onclick="del(this)">删除</button></li>
  38.     <li>内容5<button onclick="del(this)">删除</button></li>
  39. </ul>
  40. </body>
  41. </html>
下一节