jquery通过单击标签删除一行表（<tr>）答案

【问题标题】：jquery delete a row of table (<tr>) through clicking a labeljquery通过单击标签删除一行表（<tr>）
【发布时间】：2018-07-20 12:47:09
【问题描述】：

我开发了一个表格，每行有 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 中应该做哪些更正？

【问题讨论】：

input[type="label"] ?对吗？
而父级不是 tr....
还有两个标签在哪里？
在每个 div 中有第一个复选框，然后是一个标签“任务 1”，然后是另一个是引导图标（删除图标）。
label 元素意味着要么有一个for 属性指向作为标签的表单元素的id，要么包装表单元素本身。参见例如MDN's documentation。如果你这样做了，那么点击label会自动选中复选框。

标签： javascript jquery html css jquery-ui

【解决方案1】：

您需要在具有glyphicon 和glyphicon-trash 类的标签上使用带有点击事件的$(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>

【讨论】：

【解决方案2】：

您的选择器 input[type=label] 不会匹配您现有的任何 html 元素。您可能想尝试以下选择器：$('.checkbox label.glyphicon-trash')

【讨论】：

确实如此。标签位于类 checkbox 的 div 内部。