javascript - jquery 通过点击一个标签删除一行表 (<tr>)

Question

我开发了一个表格，每行有 1 列，每行有一个复选框和 2 个标签。

$('input[type="label"]').click(function() {
      var id = $(this).attr("id");
      $(this).parent("tr:first").remove()
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

当我点击删除标签时，整行都应该被删除。它下面的行应该自动排在上面一个位置。

应该在 jquery 中做哪些更正？

Answer 1

您需要在具有类 glyphicon 和 glyphicon 的标签上使用 $(this).closest("tr").remove() 和点击事件-垃圾:

$('.glyphicon.glyphicon-trash').click(function(){
      $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">

  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>