Javascript删除表tbody标签

Question

我知道我可以使用以下代码删除vanilla Javascript中的行：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但是这段代码留下了一个空的tbody标签。 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/

Answer 2

使用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 3

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

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


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

Answer 4

没有deleteTbody，但有removeChild：

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