javascript - 在codeigniter中通过ajax删除后隐藏数据表的行(tr)

Question

我正在尝试使用 ajax 调用删除 codeigniter 中的记录。删除功能工作正常我的问题是删除后隐藏该行。我在 View 中使用bootstrap 数据表

<script>
  function remove_cart(itemid) {
    event.preventDefault();
    alert("Delete you really want to delete?");
    var id = $(this).attr('id');
    var btn = this;
    alert(btn);
    $.ajax({
      type: 'POST',
      url: '<?php echo site_url("admin/careers/delete/' + itemid + '")?>',
      data: {
        id: itemid
      },
      success: function(Success) {
        $(btn).closest('tr').fadeOut("fast");

      }
    });
  }
</script>

查看

<a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a>

表格

<table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Post applied</th>
            <th>Phone</th>
            <th>Resume</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($jobs as $info) {?>
        <tr>
            <td>
                <?php echo $info['fname'];?> </td>
            <td>
                <?php echo $info['post_applied'];?> </td>
            <td>
                <?php echo $info['phone'];?> </td>
            <td><a href="http://abravmsd.com/uploads/<?php echo $info['resume'];?>" target="_blank">Download</a> </td>
            <td>
                <a href="<?php echo base_url();?>admin/careers/delete/<?php echo $info['id']; ?>" class="delete">Delete</a>
                <a onclick="remove_cart('<?php echo $info['id']; ?>')" id="id">test</a>
            </td>
        </tr>
        <?php  } ?>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Answer 1

this 在函数上下文中可能有点棘手。查看MDN documentation for this

对于您的问题，remove_cart 是一个内联监听器，调用时，this 设置为 window(全局对象)。

要点击当前元素，其中一种方法可能是:

var btn = event.target;

这是一个演示:

(为简单起见，我将 ajax 调用替换为 setTimeout 并且在某些地方进行了硬编码)

function remove_cart(itemid) {
  event.preventDefault();
  var btn = event.target;
  setTimeout(function() {
    $(btn)
      .closest("p")
      .fadeOut("fast");
  }, 100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This will be fade out after some time... <a href="" onclick="remove_cart('123')" id="id">test</a></p>

另一种方法是使用 jQuery 的 .on('click') 方法或 js 的 addEventListener 方法绑定(bind)事件处理程序。这些在网络上很容易获得。查查他们!