j查询<tr>通过单击标签删除一行表 ()

Question

我开发了一个表，每行中有一列，每行有一个复选框和两个标签。

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

Answer 2

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