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 有删除 thead 和 tfoot 元素的方法，但似乎缺少 deleteTbody 一个。

我应该如何仅使用纯 javascript 删除 tbody 及其所有内容？没有 jQuery，拜托!

Answer 1

尝试使用:

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

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