实现功能：
点击删除超链接删掉
var lis=document.getElementsByTagName("li");
for (let i = 0; i < lis.length; i++) {
lis[i].onclick=function () {
if (confirm("确定删除" + this.firstChild.nodeValue + "信息吗")) {
this.parentNode.removeChild(this);
}
}
}
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li id="NJnode">南京</li>
</ul>
<ul id="game">
<li>王者</li>
<li>原神</li>
<li>开心消消乐</li>
<li id="dzNode">蛋仔</li>
</ul>
<button id="btn1">删除</button>删除员工表中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
text-align: center;
}
table,td,th{
border:1px solid black;
}
</style>
<script type="text/javascript">
window.onload=function (){
document.getElementById("a").onclick=function (){
var d=document.getElementById("a1");
d.parentNode.removeChild(d);
}
document.getElementById("b").onclick=function (){
var d=document.getElementById("b1");
d.parentNode.removeChild(d);
}
document.getElementById("c").onclick=function (){
var d=document.getElementById("c1");
d.parentNode.removeChild(d);
}
}
</script>
</head>
<body>
<h3>员工管理系统</h3>
empno:<input type="text" id="empno"/>
empname:<input type="text" id="empname"/>
sal:<input type="text" id="sal"/>
<button id="add">添加</button>
<br/>
<br/>
<br/>
<br/>
<table id="tab">
<tr>
<th>empno</th>
<th>epname</th>
<th>sal</th>
<th></th>
</tr>
<tr id="a1">
<th>1001</th>
<th>张三</th>
<th>8000</th>
<td><a href="#" id="a">delete</a></td>
</tr>
<tr id="b1">
<th>1002</th>
<th>李四</th>
<th>8500</th>
<td><a href="#" id="b">delete</a></td>
</tr>
</tr>
<tr id="c1">
<th>1003</th>
<th>王五</th>
<th>9000</th>
<td><a href="#" id="c">delete</a></td>
</tr>
</table>
</body>
</html>缺点：每个都需要写id，可扩展性很差，
传入aNode的标签名 aHTML中的常用标签用法_html标签大全及用法-CSDN博客
delete的标签名就是 a
删除代码改进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
text-align: center;
}
table,td,th{
border:1px solid black;
}
table{
border-collapse: collapse;
margin: 1px auto;
}
td,th{
panding:10px,20px
}
</style>
<script type="text/javascript">
//删除函数
function delTr(aNode){
var trNode=aNode.parentNode.parentNode;//定位到aNode所在的tr
var tdNode=trNode.getElementsByTagName("td")[1];//获得tr中的姓名td子节点，显示在提示框中
var text=tdNode.firstChild.nodeValue;//获取td子节点中的文字节点的文本内容
var flag=confirm("确定删除"+text+"的信息吗")//confirm语句,选择flag就是true
if(flag){
trNode.parentNode.removeChild(trNode);//是的话就删除tr整个节点元素
}
}
window.onload=function (){
//在窗体加载中给删除函数传aNode的值
var aNodes=document.getElementsByTagName("a");//getElementsByTagName删除标签名
for (let i = 0; i < aNodes.length; i++) {
aNodes[i].onclick=function (){
delTr(aNodes);//利用遍历不用一个一个传id
}
}
//添加过程
}
</script>
</head>
<body>
<h3>员工管理系统</h3>
empno:<input class="input"type="text" id="empno"/>
empname:<input class="input" type="text" id="empname"/>
sal:<input class="input" type="text" id="sal"/>
<button id="add">添加</button>
<br/>
<br/>
<br/>
<br/>
<table id="tab">
<tr>
<th>empno</th>
<th>epname</th>
<th>sal</th>
<th></th>
</tr>
<tr id="a1">
<td>1001</td>
<td>张三</td>
<td>8000</td>
<td><a href="#" id="a">delete</a></td>
</tr>
<tr id="b1">
<td>1002</td>
<td>李四</td>
<td>8500</td>
<td><a href="#" id="b">delete</a></td>
</tr>
</tr>
<tr id="c1">
<td>1003</td>
<td>王五</td>
<td>9000</td>
<td><a href="#" id="c">delete</a></td>
</tr>
</table>
</body>
</html>
