CODEWITHSUNDEEP
javascriptjqueryhtml
Przemek Sulecki
Przemek Sulecki

Reputation: 168

Removing row from table by clicking close icon

I want to delete individual row in the table by clicking close icon. How can I achieve that result? By default I wrote code for remove all rows. I wonder also about better way to print rows in table: 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();
});

Upvotes: 2

Views: 1031

Answers (3)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Use $(this).closest('tr').remove(); to delete the corresponding row for the delete icon you clicked:

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)
        });
      });
});
<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>

Upvotes: 2

Kiran Shahi
Kiran Shahi

Reputation: 7970

You need this to get clicked object.

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

Here is working example.

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)
        });
      });
});
<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>

Upvotes: 2

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

Update your click event handler to following. Use jQuery.closest

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

For reference, updated fiddle

Upvotes: 3

Related Questions