jquery - 选择的 tbody 不使用 jquery 从多个 tbody 中删除

Question

我知道这是一个非常简单的查询，但我花了一整天时间让它工作，但运气不好。我正在尝试删除任何带有其 ID 的 tbody，但它不是通过我在网上找到的任何方法删除的。我在这里犯了什么错误？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#btn').click(function() {
      alert('clicked');
      //    $('#td1').html('');
      //   $('#td1').remove();
      $('#td1').empty();
      //   $('#td1').css('display', 'none');
    });
  });
</script>
<p>(tbody have dummy content for testing. please ignore.)</p>
<table>
  <tbody id="td1">
    qqqqqqqqqqqqqqqq
  </tbody>
  <tbody id="td2">
    wwwwwwwwwwwwww
  </tbody>
  <tbody id="td3">
    eeeeeeeeeeeeeee
  </tbody>
</table>
<input type="button" name="complete" value="click" id="btn" />

我从 CMS 中获取此布局，我想在其中删除选定的“tbody”。

Answer 1

首先需要正确设置表的语义，即有tr和td。您可以根据需要使用 remove() 或 empty()。

$(document).ready(function() {
  $('#btn').click(function() {
    $('#td1').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<table>
  <tbody id="td1">
    <tr>
      <td>qqqqqqqqqqqqqqqq</td>
    </tr>
  </tbody>
  <tbody id="td2">
    <tr>
      <td>wwwwwwwwwwwwww</td>
    </tr>
  </tbody>
  <tbody id="td3">
    <tr>
      <td>eeeeeeeeeeeeeee</td>
    </tr>
  </tbody>
</table>
<input type="button" name="complete" value="click" id="btn" />