reorder the rows classes after deleting an item from the list
<p>I want to delete an entry from a user list and the rows classes should be rearrange, so that no two consecutive rows have the same class. How can I reorder the rows classes after deleting an item from the list? For example: If I delete the item 'five', the elements 'four' and 'six' have the same rows classes.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
&lt;script type="text/javascript" src="jquery-1.8.2.min.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;

ul#users { list-style:none; margin:0 auto; width:50%; }
ul#users li { padding:3px; cursor:pointer; }

ul#users li a.delete { float:right; }
ul#users li.col0 { background:#ffffff; }
ul#users li.col1 { background:#fbfbfb; }
ul#users li.col2 { background:#fdffce; }


&lt;/style&gt;
&lt;script type="text/javascript"&gt;

$(document).ready(function(){

    // hover class
    var clshover = "col2";

    // confirm message
    var msgconfirm = "You really want to delete this entry?";

    // Hover effect
    $('ul#users &gt; [class^=col]').hover(
        function () {
            $(this).addClass(clshover);
        },
        function () {
            $(this).removeClass(clshover);
        }
    );

    // Delete a defined entry
    $('ul#users &gt; li &gt; a.delete').click(function (){
        if (confirm(msgconfirm)) {
            $(this).parents('li').remove();
        }
    });

});

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;ul id="users"&gt;
    &lt;li id="users0" class="col0"&gt;one&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users1" class="col1"&gt;two&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users2" class="col0"&gt;three&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users3" class="col1"&gt;four&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users4" class="col0"&gt;five&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users5" class="col1"&gt;six&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users6" class="col0"&gt;seven&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users7" class="col1"&gt;eight&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users8" class="col0"&gt;nine&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="users9" class="col1"&gt;ten&lt;a href="javascript:;" class="delete" title="Delete"&gt;&amp;nbsp;x&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
