Question

I have a table with alternate color rows.

$("#contTbl tr:even").addClass("altBgr"); 

Than I have a function that does some transaction and after AJAX post it removed the row.

$(".clickMe").click(function() {
        var trID = $(this).closest("tr").attr("id");
        $.ajax({
            url: "ajax.php",
            type: "POST",
            data: { 
                contID: trID
            },
            success: function(data){
                $("#"+trID).remove();
            }
        });
    });

The problem that I have is when I remove a row, the color of the other rows becomes out of order… Is there a way to refresh it somehow on remove?

Answer 1

What about removing the class on the click and adding it back on the success retrieval?

$(".clickMe").click(function() {
    var trID = $(this).closest("tr").attr("id");
    $.ajax({
        url: "ajax.php",
        type: "POST",
        data: { 
            contID: trID
        },
        success: function(data){
            $("#"+trID).remove();
            $("#contTbl tr:even").removeClass("altBgr");  
            $("#contTbl tr:even").addClass("altBgr");
        }
    });
});

Edited: as per my own comment

You can try putting both the removeClass() and addClass() in the
success: and see if that eliminates the flicker