Question

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

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

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

我的问题是＆＃34;删除＆＃34;另外，在删除任何内容时，我需要所有div保持在当前位置。

一旦我重新创建新的，他们应该占用以前删除的空白区域。

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

请参阅此处的代码示例：https://jsfiddle.net/t6wvLyjb/

Answer 1

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

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

你可以做这样的事情

compare

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;
}

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

Answer 2

尝试使用CSS使位置固定或绝对。这样，您将元素的位置固定到位。

我不知道当你删除元素但是值得一试时它是否会起作用。

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

2 个答案: