Question

我有一个看起来像这样的表：

<table>
    <tr>
        <td>Somthing</td>
        <td>Somthing</td>
        <td><span><a href="#" data-id="45" class="btn btn-danger btn-xs delete" data-title="Delete"><span class="glyphicon glyphicon-trash"></span></a></span></td>
    </tr>
</table>

单击该按钮时，将使用此jQuery脚本从数据库中删除该行：

$('.delete').click(function() {
    swal({
        title: "Sure you want to delete?",
        text: "Point of no return",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete",
        closeOnConfirm: false
    }, function() {

        swal("Success!", "Entry deleted!", "success");

        var data = ({
            'id': $('.delete').data("id"),
            'table': 'tablename',
            'img_root': 'images',
            'affiliated_table': 0,
            'affiliated_tablename': ''
        });

        $.ajax({
            type: "POST",
            url: "/libs/delete.php",
            data: data,
            cache: false,
            success: function(html) {
                $('.delete').closest('tr').fadeOut('slow');
            }
        })
    });
})

我在调用AJAX之前使用sweetalert作为检查，这将删除db中的条目。这一切都很好，但我也希望删除实际的行。完成此操作后，用户应该能够实时查看更改。现在发生的是它实际上删除了所有行，我试图用这个来改变.delete，但没有任何成功。

Answer 1

您可以使用this引用引发事件的删除按钮，并从那里找到最近的tr。试试这个：

$('.delete').click(function() {
    var $delete = $(this);

    // your code...

    var data = {
        'id': $delete.data("id"), // note use of $delete here
        'table': 'tablename',
        'img_root': 'images',
        'affiliated_table': 0,
        'affiliated_tablename': ''
    };

    $.ajax({
        type:"POST",
        url:"/libs/delete.php",
        data:data,
        cache: false,
        success:function(html){
            $delete.closest('tr').fadeOut('slow', function(){
               $(this).remove();
            }); // note use of $delete here
        }
    })
})

Answer 2

试试这个

$('.delete').click(function() {

  var self = this;
  swal({
    title: "Sure you want to delete?",
    text: "Point of no return",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete",
    closeOnConfirm: false
  }, function() {

    swal("Success!", "Entry deleted!", "success");

    var data = ({
      'id': $('.delete').data("id"),
      'table': 'tablename',
      'img_root': 'images',
      'affiliated_table': 0,
      'affiliated_tablename': ''
    });

    $.ajax({
      type: "POST",
      url: "/libs/delete.php",
      data: data,
      cache: false,
      success: function(html) {
        //$('.delete').closest('tr').fadeOut('slow');
        $(self).closest('tr').fadeOut('slow')
      }
    })
  });
})

使用jQuery删除元素行

2 个答案: