Javascript删除表tbody标签

Question

我知道我可以使用以下代码删除vanilla 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标签.JS有删除thead和tfoot元素的方法,但它似乎缺少deleteTbody一个.

我怎么应该tbody只使用纯javascript 删除一个及其所有内容？请不要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/

Answer 2

如果要删除tbody标签，可以选择行本身而不是表，然后使用该removeChild函数。

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


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