CODEWITHSUNDEEP
javascriptjquery
lechnerio
lechnerio

Reputation: 982

hide/remove table row within ajax call from button click

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:

enter image description here

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

Upvotes: 0

Views: 757

Answers (1)

Timberman
Timberman

Reputation: 705

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.

Upvotes: 3

Related Questions