CODEWITHSUNDEEP
jquerytablerow
gdlchino
gdlchino

Reputation: 3

Delete one row from a table. My code deletes the whole table

I'm trying to delete only one row, but sometimes nothing happens, and sometimes the whole table (but the headers) are deleted.

// This is the code I'm using in my php file:
<table class="table table-striped table-hover " id="tb_people">
  <thead>
    <tr>
      <th style="width: 25px;">#</th>
      <th>Name</th>
      <th>Email</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

My code for jquery, with the code below, I insert one row in the table:

counter = counter + 1;
$("#tb_people").find('tbody')
  .append($('<tr id="' + counter + '">')
    .append($('<td>')
      .append($('<b>')
        .text(counter)
      )
    )
    .append($('<td>')
      .append($('<b>')
        .text($("#inputPerson").val())
      )
    )
    .append($('<td>')
      .append($('<b>')
        .text($("#inputEmail").val())
      )
    )
    .append($('<td>')
      .append($('<a class="deleteLink" href="">Delete</a>'))
    )
  );

And here is the code I'm using to delete one row. Using any of the two options below, it happens the same:

$(".deleteLink").on("click", function(){
   $(this).closest('tr').remove();
   return false;
});

And here another way:

$(".deleteLink").on("click", function(){
    var tr = $(this).closest('tr');
    tr.css("background-color","#FF3700");
    tr.fadeOut(400, function(){
       tr.remove(); 
    });
    return false;
});

If I add the symbol # to the link (href), nothing happens:

.append($('<a class="deleteLink" href="#">Delete</a>'))

Upvotes: 0

Views: 65

Answers (3)

Digpal Singh
Digpal Singh

Reputation: 166

I am not sure but you can delete this below method in your every row

<a class="deleteLink" href="javascript:void(0)" onclick="$(this).parent().parent().remove();">Delete</a>

Upvotes: 0

Ram Ramrakhya
Ram Ramrakhya

Reputation: 41

You can delete a Record by using effects like fading out the record from the table.Try this

$(document).ready(function() {    
    $("#sample tr").click(function() {
        //change the background color to red before removing
        $(this).css("background-color","#FF3700");

        $(this).fadeOut(400, function(){
            $(this).remove();
        });
    });});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to use a delegated event handler as the .deleteLink element is dynamically appended to the page after it has been loaded. Try this:

$("#tb_people").on('click', '.deleteLink', function(e) {
   e.preventDefault();
   $(this).closest('tr').remove();
});

Upvotes: 1

Related Questions