Выбранное tbody не удаляется из нескольких tbody с помощью jquery

Question

Я знаю, что это очень простой запрос, но я потратил целый день, чтобы заставить его работать, но не повезло.Я пытаюсь удалить любого 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" />

Answer 2

Вы скрываете, используя свойство display none.

$(document).ready(function() {
  $('#btn').click(function() {
    $('#td1').css('display','none');
  });
});

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

<p>(tbody have dummy content for testing. please ignore.)</p>
<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" />