javascript - Remove table rows locally depending on ajax call -
i have table updating through reloading page i'm trying handle locally instead. render table below through php , update through ajax. when want remove rows want remove row when successful response ajax code have removal global , deletes anyway. there way me incapsulate js code in js function , perhaps call through onclick-event?
my table:
<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>
my js removal
$(document).on("click", "a.remove", function() { $(this).closest("tr").remove(); });
and want delete tablerow locally:
function remove(id) { $.ajax({ url: "ajax/ajax.php", type: "post", data: { operation: "remove", id: id }, success: function(response){ // want deletion }, error: function (response) { console.log("something went wrong"); }, }); }
anyone have idea on how redo js removal work in remove()?
change table to
<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>
the value of data-rowid
should dynamic item id want delete!
and js-code be:
$(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"); } }); });
Comments
Post a Comment