的Javascript刪除表TBODY標籤

Question

我知道我可以使用下面的代碼去除香草的Javascript行：

var table = document.getElementById('table'); 
 
    
 
function deleteRow() { 
 
    table.deleteRow(1); 
 
};

table { background: #ccc; width: 100%; } 
 
table thead { background: #333; color: #fff; } 
 
table tbody { background: magenta; color: #fff; }

<button onclick="deleteRow()">Delete Row</button> 
 
<table id="table"> 
 
    <thead> 
 
     <tr> 
 
     <td>foo</td> 
 
     <td>bar</td> 
 
     </tr> 
 
    </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>lorem</td> 
 
      <td>ipsum</td> 
 
     </tr> 
 
     </tbody> 
 
     <tbody> 
 
     <tr> 
 
      <td>lorem</td> 
 
      <td>ipsum</td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

但這代碼葉空TBODY標籤behing。 JS有刪除adad和tfoot元素的方法，但它似乎缺少一個deleteTbody之一。

我該如何刪除tbody及其所有內容？請不要使用jQuery！

Answer 1

如果你想刪除tbody標籤，您可以選擇行本身而不是表格，然後使用removeChild函數。

var table = document.getElementById('table'); 
var row = document.getElementsByTagName('tbody')[0]; 


function deleteRow() { 
    row.parentNode.removeChild(row); 
}; 

Answer 2

沒有deleteTbody但removeChild：

var parent = document.getElementById("parent-id"); 
var child = document.getElementById("child-id"); 
parent.removeChild(child); 

Answer 3

使用querySelectorAll()通過所有TBODY元素進行迭代，然後刪除那些沒有孩子：

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

 
function deleteRow() { 
 
    table.deleteRow(1); 
 

 
    var tb = document.querySelectorAll('tbody'); 
 
    for (var i = 0; i < tb.length; i++) { 
 
    if (tb[i].children.length === 0) { 
 
     tb[i].parentNode.removeChild(tb[i]); 
 
    } 
 
    } 
 
};

table { 
 
    background: #ccc; 
 
    width: 100%; 
 
} 
 
table thead { 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
table tbody { 
 
    background: magenta; 
 
    color: #fff; 
 
}

<button onclick="deleteRow()">Delete Row</button> 
 
<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <td>foo</td> 
 
     <td>bar</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>lorem</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>lorem</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

嘗試使用：

var tbl = document.getElementById("table"); // Get the table 
tbl.removeChild(tbl.getElementsByTagName("tbody")[0]); // Remove first instance of body 

https://jsfiddle.net/Ltdr2qv4/1/