一、使用原生js来操作
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<table align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>操做</th>
</tr>
</thead>
<tbody id="t_body">
</tbody>
</table>
</body>
<script>
let tbody = document.getElementById("t_body");
let htm="";
for (let i = 0; i < 3; i++) {
htm+="<tr id='"+i+"'>" +
"<td>"+i+"</td>" +
"<td>user"+i+"</td>" +
"<td>2"+i+"</td>" +
"<td>北京"+i+"</td>" +
"<td><a href='#' οnclick='deleteDa("+i+")'>删除</a></td></tr>"
}
tbody.innerHTML=htm;
function deleteDa(id){
if (!confirm("你确定要删除id为"+id+" 的数据吗?")){
return;
}
let delId = document.getElementById(id);
delId.parentNode.removeChild(delId);
}
</script>
</html>
演示
二、使用jquery进行remove
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<table align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>操做</th>
</tr>
</thead>
<tbody id="t_body">
</tbody>
</table>
</body>
<script>
let htm="";
for (let i = 0; i < 3; i++) {
htm+="<tr id='"+i+"'>" +
"<td>"+i+"</td>" +
"<td>user"+i+"</td>" +
"<td>2"+i+"</td>" +
"<td>北京"+i+"</td>" +
"<td><a href='#' οnclick='deleteDa("+i+")'>删除</a></td></tr>"
}
$("#t_body").html(htm);
function deleteDa(id){
if (!confirm("你确定要删除id为"+id+" 的数据吗?")){
return;
}
$("#"+id).remove();
}
</script>
</html>
演示:同上