从表中删除行时将删除表标头

Question

当我从桌子上删除行时，也正在删除表标头，如何解决此问题？

$('#clubs tbody').on('click', '.deleteBtn', function() {
   $(this).closest('tr').remove();  
});

按钮标记

<td>
  <button class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn" 
                     [email protected]("Delete", "Resources")></button>
</td>

我的按钮具有一类.delete的类，因此，当我单击它时，将我的行与我的table header一起删除。

我的表格和 <代码>俱乐部 <代码>表 clubsstoby的ID。

表

<div class="table-responsive">
  <table class="table table-striped my-4 " id="clubs">
    <thead>
      <tr>
        <th>@DbResHtml.T("#", "Resources")</th>
        <th>@DbResHtml.T("Клуб", "Resources")</th>
        <th>@DbResHtml.T("Лига", "Resources")</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="clubsTBody">
@foreach (var club in Model.Player.PlayerClubs)
  {
      <tr>
        <td>@Html.DisplayFor(x => count)</td>
        <td>@Html.DisplayFor(x => club.Club.Name)</td>
        <td>@Html.DisplayFor(x => club.Club.League.LeagueType)</td>
        <td>
          <button class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn"
                             [email protected]("Delete", "Resources")></button>
        </td>
      </tr>
  count++;
  }
    </tbody>
  </table>
</div>

也​​将动态排入表中。

$(document).ready(function() {
  $('#select2-3').change(function() {
    var cc  = $('#select2-3').val();
    var ids = [];
    for (let i = 0; i < cc.length;i++) {
      ids.push(cc[i]);
    }
    $.ajax({
      type    : "POST",
      url     : "@Url.Action("GetClubsById","Player")",
      data    : {"ids": ids},
      success : function(data) {
        console.log(data);
        $('#clubs tr').remove();
        var counter = 1;
        for (let i = 0; i < data.length; i++) {
          $("#clubsTBody").append("<tr><td>" + counter + "</td>"
            + "<td>" + data[i].name + "</td>"
            + "<td>" + data[i].league.leagueType + "</td>"
            + "<td>" + '<button  class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn"  [email protected]("Delete", "Resources")></button>' + "</td>" 
            + "</tr >");
          counter++;
        }
      },
      error: function(req, status, error) {
          console.log(msg);
      }
    });
    
    $('.deleteBtn').on('click', function() {
      $(this).closest('tr').remove();

      var value = $(this).closest('tr').children('td:eq(1)').text();
      $(`#select2-3 option:selected:contains("${value}")`).prop("selected", false).parent().trigger("change");
    });
  })
    
// /.../

})

问题在这里，当我从SELECT列表中删除所选项目时，没有此代码，一切都可以正常工作，但是选择的项目并未取消选择。

$(`#select2-3 option:selected:contains("${value}")`)
  .prop("selected", false)
  .parent()
  .trigger("change");

Answer 1

$(document).ready(function() {
        $('#select2-3').change(function() {
            var cc = $('#select2-3').val();
            var ids = [];
            for (let i = 0; i < cc.length;i++){
                ids.push(cc[i]);
            }

            $.ajax({
                type: "POST",
                url: "@Url.Action("GetClubsById","Player")",
                data: {"ids": ids},
                success: function(data) {
                    console.log(data);
                    $('#clubsTBody tr').remove();
                    var counter = 1;
                    for (let i = 0; i < data.length; i++) {
                    $("#clubsTBody").append("<tr><td>" + counter + "</td>"
                    + "<td>" + data[i].name + "</td>"
                    + "<td>" + data[i].league.leagueType + "</td>"
                    + "<td>" + '<button  class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn"  [email protected]("Delete", "Resources")></button>' + "</td>" 
                    + "</tr >");
                        counter++;
                    }
                },
                error: function(req, status, error) {
                    console.log(msg);
                }
            });

          $('.deleteBtn').on('click', function() {
            $(this).closest('tr').remove();

            var value = $(this).closest('tr').children('td:eq(1)').text();
            $(`#select2-3 option:selected:contains("${value}")`).prop("selected", false).parent().trigger("change");
        });
        });

您要写这篇文章： $（'＃clubstbody tr'）。remove（）; 而不是 $（'＃clubs tr'）。remove（）;
您正在删除Ajax响应中的所有TR，而不是只有身体TR