ajax呼び出しに応じてローカルにテーブル行を削除します。

Question

私は、代わりにローカルで処理しようとしているページをリロードすることによって更新しているテーブルを持っています。だから、私はこのテーブルをPHPでレンダリングし、それをajaxで更新します。私は今行を削除するときに私はajaxから正常な応答を取得する行を削除したいが、私は削除するためのコードは、グローバルでとにかく削除されます。私のjsコードをjs関数でカプセル化し、おそらくonclickイベントを通して呼び出す方法はありますか？

マイテーブル：

<table> 
<tr> 
    <td>1</td> 
    <td><a class="remove" href='#' onClick="Remove()">Remove</a></td> 
</tr> 
    <tr> 
    <td>2</td> 
    <td><a class="remove" href='#'>Remove</a></td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td><a class="remove" href='#'>Remove</a></td> 
    </tr> 
</table> 

マイ除去

$(document).on("click", "a.remove", function() { 
    $(this).closest("tr").remove(); 
}); 

ためのJSそして、私はローカルのTableRowを削除したい場所です：

function Remove(id) { 
$.ajax({ 
    url: "ajax/ajax.php", 
    type: "POST", 
    data: { 
operation: "remove", 
id: id 
}, 
    success: function(response){ 
     // This is where I want the deletion to be 
    }, 
    error: function (response) { 
     console.log("Something went wrong"); 
    }, 
}); 
} 

誰もがどのようにアイデアを持っていますRemove（）で削除するようにjsをやり直すには？

Answer 1

はdata-rowidの値は、削除したいあなたの動的なアイテムIDでなければなりません

<table> 
<tr> 
    <td>1</td> 
    <td><a class="remove" data-rowid="1">Remove</a></td> 
</tr> 
<tr> 
    <td>2</td> 
    <td><a class="remove" data-rowid="2">Remove</a></td> 
</tr> 
<tr> 
    <td>3</td> 
    <td><a class="remove" data-rowid="3">Remove</a></td> 
</tr> 
</table> 

にあなたのテーブルを変更！

とあなたのJS-コードは次のようになります。

$(document).on("click", "a.remove", function(event) { 
    event.preventDefault(); 
    var id = $(this).data("rowid"); 
    var row = $(this).closest("tr");  
    $.ajax({ 
     url: "ajax/ajax.php", 
     type: "POST", 
     data: { 
      operation: "remove", 
      id: id 
     }, 
     success: function(response){ 
      row.remove(); 
     }, 
     error: function (response) { 
      console.log("Something went wrong"); 
     } 
    }); 

});