从表中删除行时，将删除表标题

Question

当我从表中删除行时，也要删除表头，我如何才能修复这个问题？

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

按钮标签

<td>
  <button class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn" 
                     title=@DbResHtml.T("Delete", "Resources")></button>
</td>

我的按钮有一个.delete类，所以当我单击它时，我的行和我的table header一起被删除。

我的表有和id of clubs，table body有和id of clubsTBody。

表格

<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"
                             title=@DbResHtml.T("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"  title=@DbResHtml.T("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"  title=@DbResHtml.T("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‘).remove()；而不是$('#clubs tr').remove(); --您正在删除Ajax响应中的所有TR，而不是仅仅的体TRs。