javascript - 如何在删除其邻居后保持 div 位置固定？

Question

我有一个简单的脚本，可以在按下按钮时创建和删除 div。

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

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

我的问题是“删除”部分，我需要所有 div 在删除任何内容时都保持在当前位置。

一旦我重新创建新的，它们应该占据之前删除的空白。

这可以仅通过 HTML/CSS 完成吗？如果没有，我该如何解决？

请在此处查看代码示例:https://jsfiddle.net/t6wvLyjb/

Answer 1

很难做到这一点，因为一旦从 dom 中删除了一个 div，其余元素将重新排列。一种方法是绝对创建元素(这也很困难)并存储它们的位置。删除时你不会有问题，但添加时你必须将它们添加到以前存储的位置。

另一种选择是更改 block 的可见性而不是删除它们。添加而不是创建新 block 时，首先使所有 block 可见，然后再创建新 block 。

你可以这样做

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/>

这是一个演示 https://jsfiddle.net/dhirajbodicherla/t6wvLyjb/1/