绝对定位的元素影响删除时的另一个元素

Question

我有多个div是绝对定位的，并通过单击按钮动态创建。单击后，它们被放置在相对定位的容器中，我在每个div 上都有一个按钮，单击它时，将删除div，问题是在删除div 时，它会影响其他位置。

function create() {
  var $home = $('<div class="cabine"></div>');
  $("#container").append($home); 
}

.cabine {                   /*class that all div's share*/
  position: absolute;
  top:5%;
  left:10%;
  width:135px;
  height:135px;
  float:left;
  background: red;
}
#container {            /* Where the div's are placed*/
  position: relative;
  background-image: url(wall.jpg);
  background-color: #FFFFFF;
  border: 1px solid #000;
  width: 100%;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="create()">Create Cabine</button>
<div id="container"></div>

Answer 1

在 html 中，你有 #container 而不是 .container 。