为什么不能删除tr节点

html


    <table class="table">
        <tr>
            <th>表头内容</th>
            <th>表头内容</th>
            <th>表头内容</th>
        </tr>
        <tr>
            <td>表格内容1</td>
            <td>表格内容2</td>
            <td><a class="del" href="javascript:;">del</a></td>
        </tr>
        <tr>
            <td>表格内容1</td>
            <td>表格内容2</td>
            <td><a class="del" href="javascript:;">del</a></td>
        </tr>

    </table>
</div>


js



var table=document.getElementsByTagName('table')[0];
var dels=document.getElementsByClassName('del');
for (var i = 0; i < dels.length; i++) {
    dels[i].onclick=function () {
        table.removeChild(this.parentNode.parentNode);
    }
}

这段代码为什么报错？找了好久没找到错误。目的是点击删除相应的tr行

---

    <script type="text/javascript">
      var table=document.getElementsByTagName('table')[0];
      var dels=document.getElementsByClassName('del');
      for (var i = 0; i < dels.length; i++) {
          dels[i].onclick=function () {
              var tr = this.parentNode.parentNode;
              tr.parentNode.removeChild(tr);
              return false;
          }
      }
    </script>

虽然 从结构上来看 tr 是 table 的下一级节点, 但在DOM结构中 它们两个 之间还有一个 tbody 存在(虽然你没有写,但它确实存在).

---

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
可以删除