CODEWITHSUNDEEP
jquery
user3123641
user3123641

Reputation: 41

Remove parent <td> in jQuery

I have the following table structure:

<table class="table table-bordered">
  <tr>
    <th width="70%">File</th>
    <th width="15%">Size</th>
    <th width="15%">Delete</th>
  </tr>
  <tr>
     <td>Mon fichier</td>
     <td>3 kB</td>
     <td><a href="#" class="deleteFile" id="007"> Delete </a></td>
  </tr>
</table>

JS:

$('.deleteFile').click(function(){
  if (confirm("Delete ?")){
    $imagefile = $(this).attr('id');
    $.ajax({
    ...

How can I remove/hide the <tr> containing my link?

Upvotes: 3

Views: 711

Answers (3)

codingrose
codingrose

Reputation: 15699

Write:

$('.deleteFile').click(function(){
    if (confirm("Delete ?")){
        $imagefile = $(this).attr('id');
        $(this).closest("tr").remove(); 
//        $(this).closest("tr").hide(); 
    }
});

Upvotes: 0

Adil
Adil

Reputation: 148110

Use closest() to get the ancestor of element and the use hide() or remove()

To hide

$(this).closest('tr').hide();

To remove

$(this).closest('tr').remove();

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

The TR is the ancestor of the anchor tag in your situation, So use .closest() to get the desired result.

Try,

$(this).closest('tr').remove();

Your code,

$('.deleteFile').click(function(){
  if (confirm("Delete ?")){
    $(this).closest('tr').remove(); //removing the TR
    $imagefile = $(this).attr('id');
    $.ajax({
    ...

Upvotes: 4

Related Questions