如何在插入行之前清除表？

Question

在你继续阅读之前，请记住我已经完成了我的研究，但仍然无法找到解决方案。所以我有一个表格，我用JQuery填充它并正确地填充它但我似乎无法在再次填充它之前清除它。这是我的HTML：

＆＃13;

＆＃13;

$("#searchBut").click(function() {

  $('tbody > tr').remove();

  var searchT = $('#searchField').val();
  var results = $('#logs');
  results.innerHTML = 'test';
  console.log("results" + results);
  $.post('includes/searchProj.php', {
    projName: searchT
  }, function(data) {
    var data2 = JSON.parse(data);
    $.each(data2, function(key, val) {
      pArray.push("<tr><td> " + val.name + "</td>" + "<td>" + val.date + "</td>" + "<td>" + val.note + "</td>" + "<td>" + "</td>" + " </tr>");
    });

    $("<tbody>", {
      "class": "tbody",
      html: pArray.join("")
    }).appendTo("table");
    /*$('.tbody').append(pArray.join(''));*/
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" style="width:50%">
  <thead>
    <tr>
      <th>Project Name</th>
      <th>Date Created</th>
      <th>Note</th>
      <th>Total Time for Project</th>
    </tr>
  </thead>
  <tbody class="tbody">
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我还尝试了$('tbody > tr').clear()和$('tbody > tr').html("");，并选择使用tbody或table以及其他几种变体进行选择。

似乎没有什么能够清除这张桌子。任何帮助将不胜感激。

Answer 1

逻辑

由于您要执行的操作是删除标记为tbody的DOM元素，这些元素是table元素的ID为table的子元素，您可以：

1. 找到每个元素
2. 从父
中删除元素

实施

1. 找到每个元素：
   • var body_elements = document.querySelectorAll('#table tbody')
     • 请参阅CSS查询选择器，了解要传递给querySelectorAll方法
     的参数的语法
2. 从父项中删除每个元素（从页面中删除每个元素）
   • body_elements.forEach((element)=>{ element.parentNode.removeChild(element)});

一起

var body_elements = document.querySelectorAll('#table .tbody')
body_elements.forEach((element)=>{
   element.parentNode.removeChild(element) 
});