<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 30px;
} table {
width: 800px;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
} thead th,
td {
border: 1px solid black;
height: 20px;
}
</style>
</head><body>
<div class="box">
姓名:<input type="text" class="a">
年龄:<input type="text" class="b">
收入: <input type="text" class="c">
操作:<input type="text" class="d">
</div>
<button>点击</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>收入</th>
<th>操作</th>
</tr>
</thead>
<tbody> </tbody>
</table>
<script>
var btn = document.querySelector('button');
var tbody = document.querySelector('tbody');
var a = document.querySelector('.a');
var b = document.querySelector('.b');
var c = document.querySelector('.c');
var d = document.querySelector('.d');
//点击之后进行判断
btn.addEventListener('click', function () {
if (a.value !== '' && b.value !== '' && c.value !== '' && d.value != '') {
var tr = document.createElement('tr');
var trr = tbody.appendChild(tr); var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = a.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = b.value; var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = c.value; var td = document.createElement('td');
// td.innerHTML='<a href="#">删除</a>'
tr.appendChild(td);
td.innerHTML = d.value + '<a href="#">删除</a>';
}
var aa = document.querySelectorAll('a');
for (var i = 0; i < aa.length; i++) {
aa[i].addEventListener('click', function () { tbody.removeChild(this.parentNode.parentNode);
})
}
}) </script>
</body></html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 30px;
} table {
width: 800px;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
} thead th,
td {
border: 1px solid black;
height: 20px;
}
</style>
</head><body>
<div class="box">
姓名:<input type="text" class="a">
年龄:<input type="text" class="b">
收入: <input type="text" class="c">
操作:<input type="text" class="d">
</div>
<button>点击</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>收入</th>
<th>操作</th>
</tr>
</thead>
<tbody> </tbody>
</table>
<script>
var btn = document.querySelector('button');
var tbody = document.querySelector('tbody');
var a = document.querySelector('.a');
var b = document.querySelector('.b');
var c = document.querySelector('.c');
var d = document.querySelector('.d');
//点击之后进行判断
btn.addEventListener('click', function () {
if (a.value !== '' && b.value !== '' && c.value !== '' && d.value != '') {
var tr = document.createElement('tr');
var trr = tbody.appendChild(tr); var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = a.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = b.value; var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = c.value; var td = document.createElement('td');
// td.innerHTML='<a href="#">删除</a>'
tr.appendChild(td);
td.innerHTML = d.value + '<a href="#">删除</a>';
}
var aa = document.querySelectorAll('a');
for (var i = 0; i < aa.length; i++) {
aa[i].addEventListener('click', function () { tbody.removeChild(this.parentNode.parentNode);
})
}
}) </script>
</body></html>
if (a.value !== '' && b.value !== '' && c.value !== '' && d.value != '') {
var tr = document.createElement('tr');
var trr = tbody.appendChild(tr); var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = a.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = b.value; var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = c.value; var td4 = document.createElement('td');
// td.innerHTML='<a href="#">删除</a>'
tr.appendChild(td4);
td4.innerHTML = d.value + '<a href="#">删除</a>';
}
var aa = td4.getElementsByTagName("a")[0];
aa.addEventListener('click', function () {
tbody.removeChild(this.parentNode.parentNode);
})
})
at HTMLAnchorElement.<anonymous> (file:///F:/%E6%88%91%E7%9A%84%E5%89%8D%E7%AB%AF/%E6%A1%88%E4%BE%8B/%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E8%A1%A8/demo.html:86:31)
(anonymous) @ demo.html:86
var aa = document.querySelectorAll('a');
aa[aa.length - 1].addEventListener('click', function () {
tbody.removeChild(this.parentNode.parentNode);
})重复绑定事件造成的,删除后又触发了一次事件,该元素已经删除再次删除就会报错
所以给新加的这个元素绑定一个click事件就行