Is it possible to remove an inline element without the elements next to it changing their position?-CodePudding

I have 5 inline squares under a flex parent. When the button is clicked, the first square is removed. Each time the first square is removed, the squares that follow get pushed back to the left by one square's width (as would be expected). Is it possible to make the other squares maintain their position when this happens (i.e. they stay where they previously were instead of moving to the left)?

One way I can think of to do that is by absolutely positioning each square element. But is that the only way to prevent the squares from moving?

Note: I would like the squares to maintain their positions if I were to remove the last square as well; so something like justify-content: flex-end will not work for my needs because it won't work for both cases.

Note 2: visibility: hidden or opacity: 0 will also not work for my needs because I do need to actually remove the square element. I also plan to append another square element later and wouldn't want the layout to shift. Is this possible?

Please see the fiddle for an example.

$('.click-me').on('click', function() {
  // Remove the first square.
  $('.main').children().first().remove();
});

.main {
  position: relative;
  display: flex;
  margin-top: 20px;
}
.main span {
  width: 35px;
  height: 35px;
  background-color: #2e852e;
  border: 1px solid #000;
}
.main .square1,
.main .square5 {
  background-color: #a5a551;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >Click Me!</button>
<div >
  <span ></span>
  <span ></span>
  <span ></span>
  <span ></span>
  <span ></span>
</div>

CodePudding user response：

You can use grid approach and combine it with data attributes. Set data attribute index of square element and then use it in CSS, to have position of this squares in main grid. In this case you can remove any of the child elements and all other will keep their positions.

$('.click-me').on('click', function() {
  // Remove the first square.
  $('.main').children().first().remove();
});

.main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 35px); /* create grid with 5 columns */
  margin-top: 20px;
}
.main span {
  width: 35px;
  height: 35px;
  background-color: #2e852e;
  border: 1px solid #000;
}
.main .square1,
.main .square5 {
  background-color: #a5a551;
}

.square[data-index="1"] {
  grid-column-start: 1;
}
.square[data-index="2"] {
  grid-column-start: 2;
}
.square[data-index="3"] {
  grid-column-start: 3;
}
.square[data-index="4"] {
  grid-column-start: 4;
}
.square[data-index="5"] {
  grid-column-start: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >Click Me!</button>
<div >
  <span  data-index="1"></span>
  <span  data-index="2"></span>
  <span  data-index="3"></span>
  <span  data-index="4"></span>
  <span  data-index="5"></span>
</div>


<div >
  <span  data-index="2"></span>
  <span  data-index="4"></span>
  <span  data-index="5"></span>
</div>