通过ajax php删除行

Question

Hello I am just learning codeigniter, here I am displaying a database and there are several rows. I made a delete function with ajax, it worked, but it had to be reloaded, how so that when I click delete, the data is deleted and it doesn't have to be refreshed.

      <tbody id="tbody">
           <?php
              $no = 1;
                  foreach ($temporary as $m) { ?>
                      <tr>
                        <input type="hidden"  class="form-control" name="id_service" value="<?php echo $m->id_service ?>">
                        <input type="hidden"  class="form-control" name="id_cs" value="<?php echo $m->id_cs ?>">
                        <input type="hidden"  class="form-control" name="jenis" value="<?php echo $m->jenis ?>">
                        <td>
                          <input type="hidden"  class="form-control" name="id_tmp" value="<?php echo $m->id_tmp ?>">
                          <input type="text"  class="form-control" name="" value="<?php echo $m->tracking_number ?>">
                        </td>
                         <td>
                          <button type="button" class="btn btn-danger" onclick="deletes(<?php echo $m->id_tmp;?>)">Delete</button>
                        </td>
                      </tr>
               <?php } ?>
        </tbody>

ajax

function deletes(id){
if (confirm("Are you sure?")) {
    $.ajax({
       url: '<?php echo base_url();?>backend/inbound/del',
        type: 'post',
        data: {id_tmp:id},
        success: function () {
            alert('ok');
        },
        error: function () {
            alert('gagal');
        }
    });
} else {
    alert(id + " not deleted");
}
}

Answer 1

Since you've mentioned it's deleting on the backend or your database, you could just use jquery to delete that row on the UI. Here's one way without modifying your markup.

1. First is you add a class to the input field that contains the ID. I used id-input

<input type="hidden"  class="form-control id-input" name="id_tmp" value="<?php echo $m->id_tmp ?>">

1. Then use this ajax to navigate through the input fields with that class and value to delete the row. See my code on success function;

function deletes(id){
if (confirm("Are you sure?")) {
    $.ajax({
       url: '<?php echo base_url();?>backend/inbound/del',
        type: 'post',
        data: {id_tmp:id},
        success: function () {

            // loop through all input with class id-input
            $(".id-input").each(function(){

               // if it matches the value delete parent row
               if($(this).val() == id){

                  // delete parent row
                  $(this).parent().parent().remove();
               }
            });
        },
        error: function () {
            alert('gagal');
        }
    });
} else {
    alert(id + " not deleted");
}
}

---

EDIT: use .parent().parent() as we need to refer to tr, not td