问答详情
源自：9-22 编程练习

为什么删除原有的两行删不掉？和点赞最多的答案区别在哪里？

function del(obj){
        //这种方法会导致已有的两个删不掉！！！
        //var table=document.getElementById("table");
        //table.removeChild(obj.parentNode.parentNode);
        //这是点赞最多的答案
        var tr=obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);

    }

到底问题出在什么地方？

提问者：秦家小小神 2017-02-19 23:23

个回答

  • 慕运维8096988
    2017-02-23 16:30:35
    已采纳

    因为你取的ID不对，你直接取ID为table的元素，那他的父级父级就找不到元素了，所以无法删除。

    而答案是从他点击事件的那个a标签开始的，所以取3个父级就取到了tr，然后删除就有效。

    0
  • 老夫不是宠物
    2017-03-01 12:19:48

    我一开始也遇到了你这个问题，后来我想看看传入的obj.parentNode.parentNode的父级元素即obj.parentNode.parentNode.parentNode到底是不是table,就输入了以下代码。

     function del(obj)
      {
          var table = document.getElementById("table");
          var thetr = obj.parentNode.parentNode;
          alert(thetr.parentNode.nodeName);
      }

    http://img.mukewang.com/58b6481f0001d01502430147.jpg

    结果alert弹出的结果却是TBODY而不是table，后来经过一番寻找，在别人的解答中发现了这张图:

    http://img.mukewang.com/58b6489c0001fe6c02100154.jpg

    "table完整地写法是上述这张图，而我们平时写代码一般都省略其内部的三个子节点<thead> <tfoot> <tbody>，<tr>存在<tbody>中，<tbody>为<tr>父节点，但你运行代码时，浏览器会自动给你添加<thead> <tfoot> <tbody>"


    到这里，我就明白原因了。当我们通过id获取table时，<table>与<tr>之间还有<tbody>。

           var table=document.getElementById("table");

           table.removeChild(obj.parentNode.parentNode);

    在这句代码中，table代表的是<table>节点,obj.parentNode.parentNode代表的是<tr>，由于<table>的子节点是<thead> <tfoot> <tbody>而不是<tr>，所以使用removeChild()删除时会失败。

    而点赞最多的答案即：

            var tr=obj.parentNode.parentNode;

            tr.parentNode.removeChild(tr);

    这里是直接用tr.parentNode来删除tr这个节点（tr.parentNode这个节点一定是tr的父节点吧），  所以可以成功删除。

    你也可以自己编写代码测试一下。   

     


    3
  • qq_这是只仓鼠_0
    2017-02-25 22:33:53

    这回答不靠谱啊 取的ID不是<TABLE >应该也是<A>吧 是obj.的父类的父类 又不是TABLE的父类的父类

    0