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 does Grails process static files without resources plugin?

    How to print on a specific paper

    How to shrink the width size hyperlink?

    How to add border in my clip-path: polygon(); CSS style

    What is cufon and canvas and how to overwrite them

    How to put a space between the hover effect in this situation css html php?

    How to change content of a div by clicking a button outside the div?

    ASP.NET: How to set the css class of a Control during DataBind?

    How to set auto width for the fixed child div, when parent div change width?

    How to show an image on html page using only css?

    How to prevent in-line list from wrapping

    Show content on and off with Javascript

    How to make a fixed menu/sidebar while using position:relative?

    How do I scroll to s specific location in an iframe?

    how to conditionally transform div to and from a state on multiple presses of same button

    How to Javascript to load a css file only for one specific page?

    How to properly escape attribute values in css/js attribute selector [attr=value]?

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    text-align:center doesn't work vertically in CSS, how can I get around this?

    how to use css button to post method in a form?

    How do I make an image semi-transparent?

    How to speed up a slow loading PHP page that is processing several large arrays?

    how do I give partition in the
    tag?

    How can I set a border in alignment with other borders

    How to use JavaScript OnResize with delay or less processing intensive

    css: how to center box div element directly in center?

    How to make css notifications without jQuery? [closed]

    How to edit the element.style css?

    tooltip box not showing using css

    How to change the color of a div in css when another one is on focus