絕對定位元素影響另一個元素刪除

Question

我有多個定位絕對和動態創建的單擊按鈕。一旦點擊，它們被放置在一個相對定位的容器中，並且每個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。