Changing the background-color on EVERY div when on is removed

I have a list of divs (div.row), which I need to update the background-color on. Currently I am via CSS setting the background color with div.row:nth-child(odd) and div.row:nth:child(even) ..

The div.row's is being removed via a click - and then it succeeds, I need it to update the entire row so it still has the different background on every second..

how can I do that?

My script is right now:

<script type="text/javascript">
$(document).ready( function() {
    $("a.delete").click(function(){
        $.ajax({
            type: "POST",
            url: "...",
            data: { this_page_id: $(this).prev().val() },
            success: function(){
                $(".success-delete").css("display","block");
            },
            async: false,
            dataType: "html"
        });
        $("#r" + $(this).prev().val()).slideUp();

        var i = 1
        $("div.row").each( function(index){
            if( i % 2 ){
                $(this).css('ba开发者_Python百科ckground-color','#ffffff');
            } else {
                $(this).css('background-color','#ececec');
            }

            i++;
        });
    });
});
</script>

jQuery takes tons selectors:

$('div.row:even').css('background-color', 'white');
$('div.row:odd').css('background-color', '#ececec');

Here's a huge list: http://api.jquery.com/category/selectors/.

Would this not work?

$(document).ready( function() {
    $("a.delete").click(function(){
        $.ajax({
            type: "POST",
            url: "...",
            data: { this_page_id: $(this).prev().val() },
            success: function(){
                $(".success-delete").css("display","block");
                doRows();
            },
            dataType: "html"
        });
        $("#r" + $(this).prev().val()).slideUp();

        function doRows() {
            $("div.row").each( function(index){
                if( index % 2 ){
                    $(this).css('background-color','#ffffff');
                } else {
                    $(this).css('background-color','#ececec');
                };
            });
        };

        doRows();
    });
});

If I understood it correctly: If you delete one of the rows from middle, you might have to rerun the loop to reset the BG color of the rows. If the rows being deleted is at the bottom, no need to do anything.

This resetting of the row BG to be done in the click event handler where you handle row deletion.

I would also recommend using a css class instead of direct style. You can use .removeClass(), .addClass()

Hope this helps.

here is the solution.. Found out at last :-)

I am posting in hope that it can be useful to others - thank you very much for your help!

$(document).ready( function() {
    $("a.delete").click(function(){
        var id = $(this).prev().val();
        $.ajax({
            type: "POST",
            url: "/nsautolak.dk/admix/pages/delete/",
            data: { this_page_id: $(this).prev().val() },
            success: function(){
                $(".success-delete").css("display","block");
                $("#r" + id).removeClass("block").slideUp();

                $("div.block:odd").css('background-color','#ececec');
                $("div.block:even").css('background-color','#ffffff');
            },
            async: false,
            dataType: "html"
        });
    });
});