Question

I was hoping someone could help be out here. I have a stack of divs with classes ‘.my-div-1’, ‘.my-div-2’, ‘.my-div-3’ etc. I have a button inside each div that when clicked, removes this div. What I’d like to do from there is update all proceeding div classes. So if I deleted div with class ‘.my-div-2’ the next div in line, ‘.my-div-3’, would become ‘.my-div-2’, the next after that, ‘.my-div-4’, would become ‘.my-div-3’ and so on.

The way I have it set up now, is that I use .nextAll() to remove the old class and add the new, with a dymanic updating number. However, this only works for the next one, and the dynamic number doesn’t incrament for the later divs. I am not sure that nextAll is the way to do this or not, there might be a better way. Any ideas on how to achieve this? Any help would be appreciated.

EDIT – I should also mention that each div also has a mix of other classes that I need to preserve as well.

The HTML is:

<div class="my-div-container">
   <div class="myDiv my-div-1"></div>
   <div class="myDiv my-div-2"></div>
   <div class="myDiv my-div-3"></div>
   <div class="myDiv my-div-4"></div>
</div>

and the jQuery in a click event:

var divIndex = $(this).parents('.myDiv').prevAll().length;      

$(this).parents('.myDiv').nextAll().removeClass('my-div-'+(divIndex+1)).addClass('my-div-'+(divIndex));
$(this).parents('.myDiv').remove();

Answer 1

Why not just re-compute the class value for all the divs?

Example

JS

$('span').click(function(){

    $(this).closest('.myDiv').remove(); 

    $('.myDiv').each(function(i){
        var div = $(this); 
        var cls = div.attr('class'); 
        div.attr('class', cls.replace(/my\-div\-[0-9]/, 'my-div-' + (i+1)));
    }); 
}); ​

HTML

<div class="my-div-container">
    <div class="myDiv my-div-1"><span>Test</span></div>
   <div class="myDiv my-div-2 someotherclass"><span>Test</span></div>
   <div class="myDiv my-div-3 test"><span>Test</span></div>
   <div class="myDiv my-div-4"><span>Test</span></div>
</div>​