Search code examples
htmlcssposition

how would i stop the movement of an element after a previous element is removed?

I have these 3 divs here, one of which when clicked becomes hidden, but the third div is removed, how would i make sure that the third div stays in the same position, without using position: absolute; and allowing it to be moved by other means (in my case being the moving of a div wrapped around these divs)

$("#sneaky").click(function(){
	$("#sneaky").hide()
})
div {
  width: 100px;
  height: 100px;
  background-color: gray;
  border: 1px solid;
  display: inline-block;
}
#sneaky {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
    <div></div>
    <div id ="sneaky"></div>
    <div></div>
</span>

Solution

  • Use visibility: hidden for the CSS instead of hide.

    $("#sneaky").click(function(){
    $("#sneaky").css('visibility','hidden');
})