通過按鈕單擊隱藏/刪除 ajax 調用中的表行

Question

單擊同一行中的按鈕后，我試圖在 html 表中隱藏一行。

簡化版本如下所示：

成功調用 ajax 后，表格將被填充。

觸發 function deleteFilterFromTable(id, user_id)觸發另一個 ajax 調用，從數據庫中的列表中刪除過濾器。 通話本身有效。

為了讓用戶更容易，我想隱藏包含用戶單擊以提供某種視覺反饋的按鈕的行。 我嘗試將hidden的 CSS class 添加到父元素，或者簡單地在最近的tr onclick 上使用.hide() 。 知道為什么這不會隱藏該行嗎？

非常感謝你！

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

Answer 1

將您的 onclick 更改為：

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

和 function 到這個

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) 沒有指向元素，您現在將元素添加到 arguments 之一。