Javascript删除表格tbody标签答案

【问题标题】：Javascript delete a table tbody tagJavascript删除表格tbody标签
【发布时间】：2016-04-28 06:16:17
【问题描述】：

我知道我可以使用以下代码删除原版 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 一个。

我应该如何仅使用纯 javascript 删除 tbody 及其所有内容？请不要使用 jQuery！

【问题讨论】：

可以删除 tbody 内容，但不能删除 tbody 本身，这没有意义。你的目标是什么？如果要删除 tbody，为什么需要表格？
@RandallValenciano 我需要在不使用迭代器的情况下一次性删除 tbody 元素内的所有子行，因此只需删除 tbody 是有意义的。此表呈现每 10 分钟发生一次的服务器请求的结果，我需要删除以前的项目，但必须保持不变。

标签： javascript html html-table

【解决方案1】：

没有deleteTbody，但有removeChild：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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


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

【讨论】：

不应该是table.getElementsByTagName吗？

【解决方案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/

【讨论】：

感谢您消除了 answer 建议的无用工作