HTML Переместить элементы после удаления элемента

Question

В качестве школьного проекта я создаю такой сайт, как Google Keep, где вы можете создавать заметки и делиться ими.Для отображения существующих заметок я использую контейнер, строку и карточки Bootstraps.Это работает нормально, пока один элемент не будет удален, что создает пробел, где был старый элемент.Как я могу удалить пробел и заставить элементы двигаться, чтобы заполнить пробел?

Элементы:

<div class="col-sm-4">
</div>

Заранее спасибо, Никита

Answer 1

Самым простым решением может быть , а не обтекание каждой n заметки в элементе .row.Если вы сделаете это, карты будут переформатироваться самостоятельно.

Хотя трудно дать прямой ответ без MCVE , с которого можно работать.

// Demo code to illustrate card removal.
$( function () {
  
  $( '.notes' ).on( 'click', '.card', function ( e ) {
    $( this ).parent().remove();
  } );
  
} );

.card {
  margin-bottom: 1rem;
  padding: 2rem 4rem;
  text-align: center;
  cursor: pointer;
}

.card:hover {
  background-color: #eaeaea;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">

<div class="container notes">
  <div class="row">
    <div class="col col-sm-4">
      <div class="card">1</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">2</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">3</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">4</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">5</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">6</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">7</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">8</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">9</div>
    </div>
    <div class="col col-sm-4">
      <div class="card">10</div>
    </div>
  </div>  
</div>