Question

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

lst = [{'desig': 'Chairman of the Board', 'name': 'William'}, {'desig': 'Director', 'name': 'English'}, {'desig': '', 'name': 'Charles '}]

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

当我单击删除标签时，应删除整行。并且其下方的行应自动排在上方。

jquery中应做哪些更正？

Answer 1

您需要将$(this).closest("tr").remove()与具有类glyphicon和glyphicon-trash的标签上的click事件一起使用：

$('.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>

Answer 2

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

jQuery通过单击标签删除表（）的行

2 个答案: