当元素被删除时，然后重新定位/动画每个下一个元素jQuery

Question

Actually I have dynamic notification ".noti", and all has

 position:fixed;
 bottom:0;
 width:250px;
 right://adjusted via jQuery bcz they are dynamically added

 var s = $('body').find('.noti').size();
 xxxxx.css({right:s*250});

Now what I want to do is that, when I removed a element, then each next element must reposition/adjust their "right:xxx" property.

for example I have 5 div :

 |_ _ _ _ _|

and I removed the right most div

 |_ _ _ _  |

then all other divs must reposition as

 |  _ _ _ _|

I tried ".next":

 var next = $(this).closest('.noti').next('.noti');
 if(next.length > 0){
   var nextright = next.css('right');
   nextright = nextright.split('px').join('');
   next.animate({right:nextright-250},300);
 }

but it'll only reposition the next div.

So can somebody tell me that how can I use ".each()" or ".nextAll()" or a "for loop" to reposition all next elements.

Thanks & regards

UPDATE:

Now I tried :

 var parent = $(this).closest('.noti'),next = parent.next('.noti');
 var df = parent.attr('data-for');
 if(next.length > 0){
   $('.noti').each(function(){
     if(df != $(this).attr('data-for')){
       var t=$(this),pos = t.css('right');
       pos = pos.split('px').join('');
       t.animate({right:pos-250});
     }
   });
 }

Its works good only when I want to remove the right most element. but if I removed any element from the middle, than each ".noti" reposition their "right" property. But I want that only the "nextAll" elements must reposition.

UPDATE : SOLUTION

Finally this problem is solved {solution is based on Tandon's answer} http://jsfiddle.net/7f2aU/5/

Thanks

Answer 1

DEMO ^{Click on div to remove it}

var width = $('#container div').width();

$('#container div').each(function(index){
    // set css property `right` to the width * index (zero-based) + 30 (random number)
    $(this).css("right", ((width * index) + 30));

});

$("#container div").click(function(){
    var thisIndex = $(this).index();  // current element's index
    // console.log(thisIndex); a check

    $(this).siblings("div").each(function(index){ 

        // to make sure the element `$(this)` (the sibling) is to the left of the element clicked on 
        if((index + 1) > thisIndex){

            var css = parseInt($(this).css("right"), 10); // parse the property

            $(this).css("right", css - width); // set it shifted to right by an offset equal to width
            // console.log($(this).css("right")); a check
        }
    });

    $(this).remove(); // finally, remove it
});