jquery实现增加数据 删除数据

1. <div class="box">
2.      姓名 ：<input class="name" type="text" value="张韶涵" />
3.      爱好 ： <input class="hobby" type="text" value="天使的翅膀" />
4.      性别 ： <select  class="sele">
5.            <option value="男">男</option>
6.            <option value="女">女</option>
7.          </select>
8.      <input class="add" type="button" value="添加" />
9.    </div>
10. 
11.     <table border="1" width="500">
12.       <!-- 一对tr 代表一行 一对td 代表一个单元格-->
13.       <tr>
14.         <td>姓名</td>
15.         <td>爱好</td>
16.         <td>性别</td>
17.         <td>删除</td>
18. 
19.       </tr>
20. 
21.     </table>

1. // 增加信息 （增）
2.    // 2. 放数据
3. // 添加点击事件
4.  $(".add").on("click",function(){
5. 
6.    //1.获取信息
7.    var name = $(".name").val()
8.    var hobby =$(".hobby").val()
9.    var sex = $(".sele").val()
10. 
11. 
12.     $("table").append(`<tr> <td>${name}</td> <td>${hobby}</td> <td>${sex}</td> <td> <button>删除 </button>  </td> </tr>`)
13. 
14.      //删除 （删）
15. 
16.    $("table button").on("click",function(){
17.     // remove() 删除
18.     $(this).parent().parent().remove()
19. 
20.    })
21. 
22.   })