Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout after removal - specifically, filling the empty space left by the deleted element by shifting the position of its immediate siblings.
<div class="carousel-inner">
<div class="mycrousel" id="photo1" style="left:10"></div>
<div class="mycrousel" id="photo2" style="left:120"></div>
<div class="mycrousel" id="photo3" style="left:230"></div>
<div class="mycrousel" id="photo4" style="left:340"></div>
<div class="mycrousel" id="photo5" style="left:450"></div>
<div class="mycrousel" id="photo6" style="left:560"></div>
<div class="mycrousel" id="photo7" style="left:670"></div>
<div class="mycrousel" id="photo8" style="left:780"></div>
<div class="mycrousel" id="photo9" style="left:890"></div>
<div class="mycrousel" id="photo10" style="left:1000"></div>
</div>
All these divs are aligned horizontally from left to right. For instance, if the user deletes the div with id=photo5, I aim to reduce the "left" property of all subsequent divs (photo6 to photo10) by 110 pixels each to fill up the vacant space.
function scrollThumb() {
var $scrollWidth = 110;
var $photoId = 'photo5'; //id of the deleted photo
var $totalPhoto = $('.carousel-inner > div').length; //get total number of remaining divs
$('#photo6').animate({
left: "-=" + $scrollWidth + "px"
});
$('#photo7').animate({
left: "-=" + $scrollWidth + "px"
});
$('#photo8').animate({
left: "-=" + $scrollWidth + "px"
});
$('#photo9').animate({
left: "-=" + $scrollWidth + "px"
});
$('#photo10').animate({
left: "-=" + $scrollWidth + "px"
});
}
The code above serves as a basic outline of my objective. I do not wish to hardcode the adjustments and instead seek a dynamic solution. It's worth noting that using a counter variable won't suffice due to the non-sequential nature of the ids. Any assistance or alternative ideas are greatly appreciated. Thank you in advance.
EDIT: https://i.stack.imgur.com/9AoiR.png
In light of the updated information with the image reference, consider a scenario where there are initially four images displayed. Upon deleting one, I need to automatically adjust the "left" property of the remaining two images on the right side of the deleted one by reducing their left values by 110 pixels each. This adjustment is necessary to maintain the layout when using absolute positioning. Your suggestions and help are welcome. Thanks.