hide/remove table row within ajax call from button click

Question

I'm trying to hide a row within a html table after clicking on a button in the same row.

A simplified version looks like this:

the table gets populated after a successful ajax call.

triggering the function deleteFilterFromTable(id, user_id) triggers another ajax call, which deletes the filter from the list in the database. the call itself works.

To make it easier for the user I'd like to hide the row which contains the button the user clicked on to give some sort of optical feedback. I tried adding the CSS class hidden to the parent element, or simply use .hide() on the closest tr onclick. Any idea why this does not hide the row?

thank you very much in advance!

html

<table class="table table-bordered" id="filter_table">
   <thead>
      <tr>
         <th scope="col">Filter</th>
         <th scope="col" width="70px">Aktion</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>LOL9999</td>
         <td><button type="button" class="btn btn-secondary btn-rounded pt-2 pb-2" onclick="deleteFilterFromTable(22, 495)"><i class="mdi mdi-delete-forever mx-2"></i></button></td>
      </tr>
      <tr>
         <td>Testinger</td>
         <td><button type="button" class="btn btn-secondary btn-rounded pt-2 pb-2" onclick="deleteFilterFromTable(1, 495)"><i class="mdi mdi-delete-forever mx-2"></i></button></td>
      </tr>
      <tr>
         <td>V-00019</td>
         <td><button type="button" class="btn btn-secondary btn-rounded pt-2 pb-2" onclick="deleteFilterFromTable(2, 495)"><i class="mdi mdi-delete-forever mx-2"></i></button></td>
      </tr>
   </tbody>
</table>

jquery

function deleteFilterFromTable(filter_id, filter_uid){
    $.ajax({
        url: `/backend/DeleteFilterByFilterId?filter_id=${filter_id}&uid=${filter_uid}`,
        type: 'post',
        success: function(response){ 
            $(this).closest('tr').hide();
        } 
    });
}

Hi, pass this here onclick="deleteFilterFromTable(22, 495 ,this)" as well then change function like this -> function deleteFilterFromTable(filter_id, filter_uid ,el){ lastly use $(el).. instead of $(this).. inside ajax call. — Swati
– Swati, Commented May 4, 2021 at 14:41
If the answer helped, please mark it as a solution. You'll help others who come to this post with the same problem they're having. — Timberman
– Timberman, Commented May 4, 2021 at 14:51

Timberman · Accepted Answer · 2021-05-04 14:43:43Z

3

Change your onclick to:

onclick="deleteFilterFromTable(2, 495, this)"

and the function to this

function deleteFilterFromTable(filter_id, filter_uid, element){
    $.ajax({
        url: `/backend/DeleteFilterByFilterId?filter_id=${filter_id}&uid=${filter_uid}`,
        type: 'post',
        success: function(response){ 
            $(element).closest('tr').hide();
        } 
    });
}

$(this) was not pointing to the element, you are now adding the element to one of the arguments.

answered May 4, 2021 at 14:43

Timberman

7039 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Laurent S. Over a year ago

additionally , this could also beneficiate not to be put inline and with the data being a data-attribute of the button...

Collectives™ on Stack Overflow

hide/remove table row within ajax call from button click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related