需求很简单，如下图：点击表格内每行的删除按钮时删除该行
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<style>
*{margin:0;padding:0;}
.box-content{width:1000px;padding:10px;margin:10px auto;background:rgba(199, 237, 204, 1);font-size:12px;}
.box-main{padding:10px;background:#ffff;}
.box-hd{line-height:22px;}
.box-title{font-size:14px; font-weight:600;color:#323232;}
.table-fixed{table-layout:fixed;border-spacing:0;border-collapse:collapse;}
.table-fixed th{height:30px;background:#b4e0a3;box-sizing:border-box;}
.table-fixed th,
.table-fixed td{font-weight:normal;padding:0;margin:0;line-height:16px;padding:3px 0 3px 4px;border:1px solid #a0e08e;text-align:left;word-break:break-all;}
.input{padding:0 4px;height:18px;border:1px solid #ddd;}
.input-60{width:50px;}
.tip{margin-top:5px;color:#f00;}
</style>
</head>
<body>
<div class="box-content">
<div class="box-main">
<h2 class="box-title">开票清单</h2>
<table class="table table-fixed" id="table">
<tr>
<th width="80">销售型号ID</th>
<th width="118">子项</th>
<th width="70">品牌</th>
<th width="70">销售单价</th>
<th width="60">销售数量</th>
<th width="70">已开票</th>
<th width="70">开票申请中</th>
<th width="70">可开票</th>
<th width="70">本次开票</th>
<th width="70">本次开票额</th>
<th width="120">订单号</th>
<th width="70">客户联系人</th>
<th width="40">操作</th>
</tr>
<tr class='tr-item'>
<td>188888</td>
<td>123456789123456789</td>
<td></td>
<td></td>
<td>10000</td>
<td>1000</td>
<td>1500</td>
<td>1500</td>
<td><input class="input input-60" type="text" value="2500"></td>
<td>1500</td>
<td>SOP18122588888</td>
<td><a href="#">成sir</a></td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr class='tr-item'>
<td>288888</td>
<td>123456789123456789</td>
<td></td>
<td></td>
<td>10000</td>
<td>1000</td>
<td>1500</td>
<td>1500</td>
<td><input class="input input-60" type="text" value="2500"></td>
<td>1500</td>
<td>SOP18122588888</td>
<td><a href="#">成sir</a></td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>总计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>4500</td>
<td>1500</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p class="tip">*本次开票数量不能为空！</p>
</div>
</div>
<script>
function queryElement(node,selectScope){
d = !selectScope ? document : selectScope;
if(/\./.test(node)){
node = node.replace('.','');
//HTMLcollection 伪数组
node = d.getElementsByClassName(node);
}else if(/\#/.test(node)){
node = node.replace('#','');
//HTML元素
node = d.getElementById(node);
}else{
//HTMLcollection 伪数组
node = d.getElementsByTagName(node);
}
return node;
}
function closest(node,parent){
if(parent){
parent = queryElement(parent);
while(node.nodeType !== 9){
node = node.parentNode;
// class tagName时判断伪数组中是否存在该node元素
// id时判断是否相等
if([].indexOf.call(parent,node) >= 0 || node === parent){
return node;
}
}
}
return null;
}
function parentsUntil(node,parent,isIncludeParent){
if(parent){
parent = queryElement(parent);
var arr = [];
while(node.nodeType !== 9){
var tempNode = isIncludeParent ? node : node.parentNode;
// class tagName时判断伪数组中是否存在该node元素
// id时判断是否相等
var nowIsParent = [].indexOf.call(parent,tempNode) >=0 || tempNode === parent;
if(nowIsParent){
break;
}
node = node.parentNode;
arr.push(node);
}
return arr;
}
return null;
}
// closest 调用
var del = queryElement('.del');
[].forEach.call(del,function(item){
item.onclick = function(e){
var p = closest(this,'tr');
p.parentNode.removeChild(p);
e.preventDefault();
}
});
// parentsUntil 测试调用
var tip = queryElement('.tip')[0];
var parents = parentsUntil(tip,'.box-content',true);
Array.prototype.forEach.call(parents,function(item){
item.style.borderLeft = '2px solid #ff0000';
});
</script>
</body>
</html>