用ajaxphp删除行

您好，我正在学习codeigniter，这里我显示了一个数据库，有几行。我用ajax做了一个delete函数，它工作了，但是必须重新加载，这样当我单击delete时，数据就被删除了，而不必刷新

      <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>

因为您已经提到它是在后端或数据库上删除的，所以您可以使用jquery在UI上删除该行。这里有一种不修改标记的方法

首先，将一个类添加到包含ID的输入字段中。我使用了ID input
有关详细信息，请使用另一种方法
.closest（）

Php代码


通过
不必刷新
是否意味着在不刷新页面的情况下更新显示？如果是这样，您需要将一些Javascript添加到AJAX
success
处理程序中，以从DOM中删除删除的行。@yudafajar我更新了代码，请使用.parent（）.parent（）.remove（）
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");
}
}

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

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

<tbody id="tbody">
           <?php
              $no = 1;
                  foreach ($temporary as $m) { ?>
                      <tr class="jsRowDelete">
                        <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;?>,this)">Delete</button>
                        </td>
                      </tr>
               <?php } ?>
        </tbody>

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

                //or

               //$(oElem).closest("tr").remove();
            },
            error: function() {
                alert('gagal');
            }
        });
    } else {
        alert(id + " not deleted");
    }
}