用js删除tbody的代码

下面是用 JavaScript 删除 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 中所有性别为女的信息。通过遍历所有行，获取到性别单元格，判断是否为女性，最终删除符合条件的行。