请大神帮忙分析这个删除出现的问题如何解决，Thanks

<!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>

解决方案 »

  1.   

            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 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);
                })
            })
      

  2.   

    demo.html:86 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
        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
      

  3.   


    var aa = document.querySelectorAll('a');
                aa[aa.length - 1].addEventListener('click', function () {
                    tbody.removeChild(this.parentNode.parentNode);
                })重复绑定事件造成的，删除后又触发了一次事件，该元素已经删除再次删除就会报错
    所以给新加的这个元素绑定一个click事件就行
      

  4.   

    demohtml:86行未捕获的DOMException:未能在“Node”上执行“removeChild”：要删除的节点不是此节点的子节点。   你主要看一下86行  问题点在86行