How to keep divs position fixed even after deleting its neighbors?


Tags: javascript,jquery,html,css

Problem :

I have a simple script that creates and deletes divs when pushing buttons.

$("#add").click(function(){
    $(document.body).append('<div class="bloc">'+(++_INDEX)+'</div>');
});

$("#del").click(function(){
    $(".bloc:first").remove();
});

My issue is with the "Delete" part, I need all the divs to stay at their current position when deleting anything.

And once I recreate new ones, they should take up the blank space left from previously deleted ones.

Could this be done through HTML/CSS only ? If not, how can I solve this ?

Please see the code example here: https://jsfiddle.net/t6wvLyjb/



Solution :

It is difficult to do that because once a div has been removed from the dom rest of the elements will rearrange. One way to do is create elements absolutely(which is also difficult) and store their locations. While deleting you will not have a problem but while adding you have to add them to the previously stored locations.

Another option is to change the visibility of blocks instead of removing them. When adding instead of creating new ones first make all the blocks visible first and then create new ones.

You can do something like this

var _INDEX = 0;

$(document).ready(function(){

    $("#add").click(function(){
        if(!$('.bloc.removed').length){
            $(document.body).append('<div class="bloc">'+(++_INDEX)+'</div>');
        }else{
            $(".bloc.removed").first().removeClass('removed');
        }
    });

    $("#del").click(function(){
        $(".bloc:not(.removed)").first().addClass('removed');
    });

});

var _INDEX = 0;

$(document).ready(function() {

  $("#add").click(function() {
    if (!$('.bloc.removed').length) {
      $(document.body).append('<div class="bloc">' + (++_INDEX) + '</div>');
    } else {
      $(".bloc.removed").first().removeClass('removed');
    }
  });

  $("#del").click(function() {
    $(".bloc:not(.removed)").first().addClass('removed');
  });

});
.bloc {
  background-color: red;
  margin: 8px;
  padding: 6px;
  float: left;
  width: 200px;
  height: 64px;
}
.removed {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Add" id="add" />
<input type="button" value="Del" id="del" />
<br/>

Here is a demo https://jsfiddle.net/dhirajbodicherla/t6wvLyjb/1/


    CSS Howto..

    How to get my navbar to fluidly contain the largest element?

    CSS in CKEDITOR - How to make a HTML code like

    display in red color?

    How to CSS style a table such that its width is within [min, max] percent of page width and as wide as necessary?

    newbie css/php question - how to get a div between a label and an input with cakephp

    How do I increase the size of the text contained?

    How does jQuery affect CSS structure

    CSS: How to switch two background images with fading transition?

    D3js SVG open lines display a fill artifact, how to fix it?

    How to highlight a whole table cell with padding when hovering?

    How to get CSS in Javascript working correctly

    HTML / CSS: How to make the content follow the footer?

    How to responsive the large background image using CSS (WordPress)

    How to call in Javascript a requestAnimationFrame loop?

    How to do drop-down box like “More action” in gmail

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How to make the section and aside touch the footer?

    How to make a 3D banner overlay (??) with CSS

    CSS - how to set a position of UL in LI

    How to control element position when changing window size for parallax purpose

    How to add css styles on aria-hidden attribute

    How can I Highlight links only in Blog Posts with Mouseover?

    how to load all css and js at a time in Cakephp

    How to change default theme color teal to blue without using custom CSS in materilaize

    How to differentiate the common css class by using other css class

    How to get the root directory of wordpress in css

    How to make Asp.net Gridview header and first column frezee?

    CSS: How to move contents of one div into another one

    How to reload CSS after ajax call

    How to change menu icon when scrolling to specific sections of the website?

    How to make div horizontally and vertically centered without scripting?