jQueryのに削除ボタンをクリックすると、テーブル全体の行を非表示にする必要があり

コードGuruDev:

私はjqueryのAJAX mathod使用して削除ボタンをクリックしてテーブルの行を削除しようとすることで、アプリケーションに取り組んでいます。PHPのバックエンド部分は細かいですが、私は何を適用しようとしていることは非表示またはクリックイベントにフェードアウト()jqueryのメソッドが、結果を取得することができません。次のコードを参照してください。

$('.deletePageBtn').on('click', function(e) {
  e.preventDefault();

  if (confirm('Do you really want to delete this page?')) {
    var pageId = $(this).data("pageid");
    $.ajax({
      url: "<?= base_url('admin/pagemanagerSavePage')?>",
      type: 'POST',
      data: {
        action: "delete-page",
        pageId: pageId
      },
      success: function(data) {
        if (data == 'success') {
          $(this).parent().parent().remove();
        }
        console.log(data);
      },
      error: function(data) {
        console.log(data);
      }
    });
  };
});
<tr id="rowId_26" class="rowData odd" role="row">
  <td class="text-center sorting_1">3</td>
  <td class="bg-success text-light text-center">
    <i class="fas fa-eye"></i>
  </td>
  <td>
    Pawan Mall - Internet Geek 123
    <div class="btn-group float-right">
      <a href="#" class="btn btn-sm btn-primary" target="_blank">
        <i class="fas fa-eye"></i> View Page
      </a>
      <a href="" id="editPage" class="btn btn-sm btn-warning">
        <i class="fas fa-edit"></i> Edit Page
      </a>
      <a href="" data-pageid="26" class="btn btn-sm btn-danger deletePageBtn">
        <i class="fas fa-trash"></i> Delete Page
      </a>
    </div>
  </td>
</tr>

palaѕn:

ここでの問題は、Ajaxの成功の内側にあります。

success: function(data) {
   if (data == 'success') {
      $(this).parent().parent().remove();
   }
   console.log(data);
},

this指し、jqXHRAjax呼び出しの対象。その同じではない$('.deletePageBtn')要素はもう。あなたがキャッシュすることができます。この作品にするためにthis開始時に内部のイベントを同様にクリックします。

var $this = $(this);

その後、同じような成功の内側にそれを使用します。

success: function(data) {
   if (data == 'success') {
      $this.parent().parent().remove();
   }
   console.log(data);
},

または、より良いです:

success: function(data) {
   if (data == 'success') {
      $this.closest('tr').remove();
   }
   console.log(data);
},

おすすめ

転載: http://10.200.1.11:23101/article/api/json?id=406072&siteId=1