删除，淡出和删除评论

Question

当我删除评论时，rowCount不会更新为不包含评论的实际数量。 因为我使用了淡出功能而不是remove（）函数，因为我希望它从视图中淡出。

我如何先淡出然后去除？

已经尝试过，但这并没有帮助：

$('#item_'+DbNumberID).fadeOut("slow", function() {
    $(this).remove();
});

编码：

jQuery.ajax({
    type: "POST",
    url: "delete-comment.php", 
    dataType:"text", 
    data:myData, 
    success: function(response){
        $('#item_'+DbNumberID).fadeOut("slow");
        var rowCount = $('#comment li').length;
        alert(rowCount);
        return false;   
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

编辑：

这是我的完整代码。 可以简单吗？

    //##### Send delete Ajax request to response.php #########
$("body").on("click", "#comment .del_button", function(e) {
    e.preventDefault();

    //e.returnValue = false;
    var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
    var DbNumberID = clickedID[1]; //and get number from array
    var myData = 'action=delete&id='+ DbNumberID; //build a post data structure

    jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "add-comment.php", //Where to make Ajax calls
        dataType: "text", // Data type, HTML, json etc.
        data: myData, //Form variables
        success: function(response){
            //on success, hide  element user wants to delete.
            $('#item_'+DbNumberID).fadeOut(500, function() {
                setTimeout(function() {
                    $('#item_'+DbNumberID).remove();
                }, 500);
            });

            var rowCount = $('#comment li').length;
            rowCount--;
            alert(rowCount);

            if (rowCount == 0) {    
                $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
            }
            return false;
        },

        error:function (xhr, ajaxOptions, thrownError){
            //On error, we alert user
            alert(thrownError);
        }
    });
});

Answer 1

这有点hacky，但是您可以设置持续时间与超时时间一样长

$('#item_'+DbNumberID).fadeOut(500, function() {
setTimeout(function() {
  $('#item_'+DbNumberID).remove();
}, 500);
});

你也可以尝试

$('#item_'+DbNumberID).fadeOut('slow').queue(function(next) {
$(this).remove();
next();
});

http://cdmckay.org/blog/2010/06/22/how-to-use-custom-jquery-animation-queues/

Answer 2

答案已经被选择，但是无论如何我都会回答，以使此页面更有用:)

您的“成功”处理程序

    success: function(response){
        //on success, hide  element user wants to delete.
        $('#item_'+DbNumberID).fadeOut(500, function() {
            setTimeout(function() {
                $('#item_'+DbNumberID).remove();
            }, 500);
        });

        var rowCount = $('#comment li').length;
        rowCount--;
        alert(rowCount);

        if (rowCount == 0) {    
            $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
        }
        return false;
    },

正如约翰·史密斯（John Smith） 所说 ，这是hackey ，但这不是必须的。 实际的问题是您忽略了fade()不会停止代码执行的事实。 当fade(500)完成时， fade(500)调用之后的代码已经运行，并返回了行数，这显然是您不希望的，因为fading仍在运行。 解决此问题的合适方法是，将所有依赖于fade()结果的代码包装在淡入淡出完整回调中 ，如下所示

success: function(response){

    var rowCount = $('#comment li').length;

    //on success, hide  element user wants to delete.
    $('#item_'+DbNumberID).fadeOut(500, function() {

        $('#item_'+DbNumberID).remove();

        /* the code that has been moved into this callback */
        rowCount = $('#comment li').length;

        alert(rowCount);

        if (rowCount == 0) {    
            $("#comment").html('<div class="PageWarning">No comments.</div></div>');    
        }
    });
    return false;
},