关于JavaScript元素选取的一些疑惑。

Question

   function removeTr(obj){
         var tbody = document.getElementById("table").lastChild;
         var tr = obj.parentNode.parentNode;
         tbody.removeChild(tr);
     }

http://www.imooc.com/code/1636

我的理解：

其中的删除函数，定义的第一个tbody变量选中的应当是表格中的最后一个元素，即最后一个tr，

第二行tr变量选中的是点击“删除”链接以后父节点的父节点(a->td->tr),即该“删除”链接所在的行；

问题如下：

1. 如果点击的不是最后一行，那么按照我的理解，对应的tr元素也是不相同的，但是通过这个函数却确实能起到删除子节点的效果，为何？

2. 两次选取对应的应当是同级的元素，却能通过操作tbody的子节点来删除任意行，这又是为何？

3. 如果我的理解有误，还希望能够指出。

感谢大家的解答！

Answer 1

其实完整的表格是这样的<table id="table">     <tbody>         <tr>             <th>学号</th>             <th>姓名</th>             <th>操作</th>         </tr>              <tr>             <td>xh001</td>             <td>王小明</td>             <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->         </tr>              <tr>             <td>xh002</td>             <td>刘小芳</td>             <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->         </tr>     </tbody> </table>他还有一层tbody,你不加浏览器会加上去的。所以document.getElementById("table").lastChild;得到的就是这个 tbody标签，它是所有tr的父标签。obj.parentNode.parentNode 它取到的就是当前行的tr,所以就可以解释通了。

Answer 2

table在渲染的时候会在tr标签外面再添加一层<tbody>标签var tbody = document.getElementById("table").lastChild;这句实际就是取得这个元素，也就是tr的父标签，所以tbody.removeChild(tr);这句就是父标签tbody删除子标签tr这样写不严谨，你从哪里找的，找个好一些的代码去研究

Answer 3

为什么还要表格布局？