HTML Move elements after element deleted - html

Question

As a school project I am creating an website like Google Keep where you can create and share notes. To display existing notes i use Bootstraps container, row and cards. This works fine until one element is deleted which creates a gap where the old element was. How can I remove the gap and make elements move to fill the gap?
The elements are:
<div class="col-sm-4">
</div>
Thanks in advance,
Nikita

Answer 1

The simplest solution might be to not wrap every n notes in a .row element. If you do this, the cards will reflow on their own.
Though it is hard to give a direct answer without an MCVE to work from.
// 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>