jquery实现增加数据 删除数据

先上效果图：

html代码如下：

<div class="box">
			姓名 ：<input class="name" type="text" value="张韶涵" />
			爱好 ： <input class="hobby" type="text" value="天使的翅膀" />
			性别 ： <select  class="sele">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
			<input class="add" type="button" value="添加" />
		</div>
		
		<table border="1" width="500">
			<!-- 一对tr 代表一行 一对td 代表一个单元格-->
			<tr>
				<td>姓名</td>
				<td>爱好</td>
				<td>性别</td>
				<td>删除</td>
				
			</tr>
			
		</table>

jq代码如下：

// 增加信息 （增）
		// 2. 放数据
// 添加点击事件
	$(".add").on("click",function(){
			
		//1.获取信息
		var name = $(".name").val()
		var hobby =$(".hobby").val()
		var sex = $(".sele").val()
		
		
		$("table").append(`<tr> <td>${name}</td> <td>${hobby}</td> <td>${sex}</td> <td> <button>删除 </button>  </td> </tr>`)
		
		 //删除 （删）
	 
	 $("table button").on("click",function(){
	 	// remove() 删除
	 	$(this).parent().parent().remove()
	 	
	 })
		
	})

主要实现了点击按钮添加数据 ， 点击删除删除本条数据