用js删除tbody的代码

下面是用 JavaScript 删除 tbody 的完整攻略：

步骤一：获取 tbody 元素

在删除 tbody 之前，需要先获取 tbody 元素。可以通过以下三种方式获取 tbody 元素：

1. getElementById 方法

使用 getElementById 方法获取指定 Id 的元素。

const tbody = document.getElementById("table-tbody");

2. getElementsByTagName 方法

使用 getElementsByTagName 方法获取指定标签名的元素集合，然后通过索引获取 tbody 元素。

const tbody = document.getElementsByTagName("tbody")[0];

3. querySelector 方法

使用 querySelector 方法获取符合指定选择器的第一个元素。

const tbody = document.querySelector("#table-tbody");

步骤二：删除 tbody 元素

获取到 tbody 元素后，就可以通过以下两种方法将其删除：

1. removeChild 方法

使用 removeChild 方法从其父元素中删除子元素。

const table = document.getElementById("table");
const tbody = document.getElementById("table-tbody");
table.removeChild(tbody);

2. parentNode 属性

使用 parentNode 属性从其父元素中删除当前元素。

const tbody = document.getElementById("table-tbody");
tbody.parentNode.removeChild(tbody);

示例说明

示例一：直接删除 tbody 元素

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody id="table-tbody">
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>
<button onclick="removeTbody()">删除 tbody</button>

<script>
function removeTbody() {
  const table = document.getElementById("table");
  const tbody = document.getElementById("table-tbody");
  table.removeChild(tbody);
}
</script>

在上面的示例中，通过点击按钮可以删除 tbody 元素。

示例二：根据条件删除 tbody 元素

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="table-tbody">
    <tr>
      <td>张三</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
<button onclick="removeFemale()">删除女性信息</button>

<script>
function removeFemale() {
  const table = document.getElementById("table");
  const tbody = document.getElementById("table-tbody");
  const rows = tbody.getElementsByTagName("tr");
  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    const gender = row.getElementsByTagName("td")[1].textContent;
    if (gender === "女") {
      tbody.removeChild(row);
    }
  }
}
</script>

在上面的示例中，点击按钮可以删除 tbody 中所有性别为女的信息。通过遍历所有行，获取到性别单元格，判断是否为女性，最终删除符合条件的行。