通过单击关闭图标从表中删除行

Question

我想通过单击关闭图标删除表中的单个行。我怎样才能达到这个结果？默认情况下，我编写了删除所有行的代码。我还想知道在表格中打印行的更好方法：link -> jsfiddler

$.each(result, function (i, field) {
    $("#persons").append(
      '<tr class="person">' + 
      '<td>' + field.id + '</td><td>' + field.last_name + '</td>' + 
      '<td>' + field.first_name + '</td><td class="text-center"><i class="fa fa-times-circle"></i></td>' +
      '</tr>');
});

$("i.fa").click(function() {
      $(".person").remove();
});

Answer 1

将您的点击事件处理程序更新为以下内容。使用jQuery.closest

$("i.fa").click(function() {
    $(this).closest("tr").remove();
});

供参考，updated fiddle

Answer 2

您需要this才能获得点击的对象。

$("i.fa").click(function() {
      $(this).parents(".person").remove();
});

这是工作示例。

＆＃13;

＆＃13;

var result = [{"id":1,"last_name":"Kowalski","first_name":"Jan"},{"id":2,"last_name":"Nowak","first_name":"Adam"},{"id":3,"last_name":"Kowal","first_name":"Zbigniew"}];

$(document).ready(function () {
      $.each(result, function (i, field) {
        $("#persons").append(
          '<tr class="person">' + 
          '<td>' + field.id + '</td><td>' + field.last_name + '</td>' + 
          '<td>' + field.first_name + '</td><td class="text-center"><i class="fa fa-times-circle">X</i></td>' +
          '</tr>');
      });

      $("i.fa").click(function() {
      $(this).parents(".person").remove();
});

      $("#search").keyup(function () {
        var value = $(this).val().toLowerCase();
        $("#persons tr").filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div class="row center-block">
			<div class="col-sm-8 mt-3">
				<h1 id="whitelistHeader" class="text-center"></h1>
			</div>

			<div class="col-sm-7">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">Search:</span>
					</div>
					<input id="search" type="text" class="form-control" placeholder="e.g. Kowalski" aria-label="Username" aria-describedby="basic-addon1">
				</div>

				<div class="table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>Lastname</th>
								<th>Firstname</th>
								<th style="color:red;text-align:center">DELETE</th>
							</tr>
						</thead>
						<tbody id="persons"></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用$(this).closest('tr').remove();删除您点击的删除图标的相应行：

＆＃13;

＆＃13;

var result = [{"id":1,"last_name":"Kowalski","first_name":"Jan"},{"id":2,"last_name":"Nowak","first_name":"Adam"},{"id":3,"last_name":"Kowal","first_name":"Zbigniew"}];

$(document).ready(function () {
      $.each(result, function (i, field) {
        $("#persons").append(
          '<tr class="person">' + 
          '<td>' + field.id + '</td><td>' + field.last_name + '</td>' + 
          '<td>' + field.first_name + '</td><td class="text-center"><i class="fa fa-times-circle">X</i></td>' +
          '</tr>');
      });

      $("i.fa").click(function() {
         $(this).closest('tr').remove();
      });

      $("#search").keyup(function () {
        var value = $(this).val().toLowerCase();
        $("#persons tr").filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div class="row center-block">
			<div class="col-sm-8 mt-3">
				<h1 id="whitelistHeader" class="text-center"></h1>
			</div>

			<div class="col-sm-7">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">Search:</span>
					</div>
					<input id="search" type="text" class="form-control" placeholder="e.g. Kowalski" aria-label="Username" aria-describedby="basic-addon1">
				</div>

				<div class="table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>Lastname</th>
								<th>Firstname</th>
								<th style="color:red;text-align:center">DELETE</th>
							</tr>
						</thead>
						<tbody id="persons"></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;