Pu sh Плавающие левые элементы после извлечения одного из элемента Shuffle

Question

Использование Shuffle. js и Bootstrap 4 Я должен удалить некоторые элементы из списка по запросу пользователя, но после удаления элемента пространство элемента остается пустым, и следующий существующий элемент не перемещается в место удаленного элемента. Я проверяю это, и анимация происходит только тогда, когда не применяется перемешивание (In Bootstrap).

Не могли бы вы сообщить мне, как это исправить?

'use strict';

var Shuffle = window.shuffle;

// ES7 will have Array.prototype.includes.
function arrayIncludes(array, value) {
  return array.indexOf(value) !== -1;
}

// Convert an array-like object to a real array.
function toArray(thing) {
  return Array.prototype.slice.call(thing);
}

var Demo = function (element) {
  this.shapes = toArray(document.querySelectorAll('.js-shapes input'));
  this.colors = toArray(document.querySelectorAll('.js-colors button'));

  this.shuffle = new Shuffle(element, {
    easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
    sizer: '.the-sizer',
  });

  this.filters = {
    shapes: [],
    colors: [],
  };

  this._bindEventListeners();
};

/**
 * Bind event listeners for when the filters change.
 */
Demo.prototype._bindEventListeners = function () {
  this._onShapeChange = this._handleShapeChange.bind(this);
  this._onColorChange = this._handleColorChange.bind(this);

  this.shapes.forEach(function (input) {
    input.addEventListener('change', this._onShapeChange);
  }, this);

  this.colors.forEach(function (button) {
    button.addEventListener('click', this._onColorChange);
  }, this);
};

/**
 * Get the values of each checked input.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentShapeFilters = function () {
  return this.shapes.filter(function (input) {
    return input.checked;
  }).map(function (input) {
    return input.value;
  });
};

/**
 * Get the values of each `active` button.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentColorFilters = function () {
  return this.colors.filter(function (button) {
    return button.classList.contains('active');
  }).map(function (button) {
    return button.getAttribute('data-value');
  });
};

/**
 * A shape input check state changed, update the current filters and filte.r
 */
Demo.prototype._handleShapeChange = function () {
  this.filters.shapes = this._getCurrentShapeFilters();
  this.filter();
};

/**
 * A color button was clicked. Update filters and display.
 * @param {Event} evt Click event object.
 */
Demo.prototype._handleColorChange = function (evt) {
  var button = evt.currentTarget;

  // Treat these buttons like radio buttons where only 1 can be selected.
  if (button.classList.contains('active')) {
    button.classList.remove('active');
  } else {
    this.colors.forEach(function (btn) {
      btn.classList.remove('active');
    });

    button.classList.add('active');
  }

  this.filters.colors = this._getCurrentColorFilters();
  this.filter();
};

/**
 * Filter shuffle based on the current state of filters.
 */
Demo.prototype.filter = function () {
  if (this.hasActiveFilters()) {
    this.shuffle.filter(this.itemPassesFilters.bind(this));
  } else {
    this.shuffle.filter(Shuffle.ALL_ITEMS);
  }
};

/**
 * If any of the arrays in the `filters` property have a length of more than zero,
 * that means there is an active filter.
 * @return {boolean}
 */
Demo.prototype.hasActiveFilters = function () {
  return Object.keys(this.filters).some(function (key) {
    return this.filters[key].length > 0;
  }, this);
};

/**
 * Determine whether an element passes the current filters.
 * @param {Element} element Element to test.
 * @return {boolean} Whether it satisfies all current filters.
 */
Demo.prototype.itemPassesFilters = function (element) {
  var shapes = this.filters.shapes;
  var colors = this.filters.colors;
  var shape = element.getAttribute('data-shape');
  var color = element.getAttribute('data-color');

  // If there are active shape filters and this shape is not in that array.
  if (shapes.length > 0 && !arrayIncludes(shapes, shape)) {
    return false;
  }

  // If there are active color filters and this color is not in that array.
  if (colors.length > 0 && !arrayIncludes(colors, color)) {
    return false;
  }

  return true;
};

document.addEventListener('DOMContentLoaded', function () {
  window.demo = new Demo(document.querySelector('.dingo'));
  
});

$(".btn-info").on("click", function(e) {
     $('.col-md-4').eq(1).addClass('d-none');
});
$(".btn-warning").on("click", function(e) {
     $('.col-md-4').eq(1).removeClass('d-none');
});

/* .shape-shuffle-container, .js-shuffle {
position:absolute;
  left:0!important;
  right:0 !important;
  top:0 !important;
  background:khaki;
  width:100% !important;
}
  .shape {
 float:left !important;
    
 } */
.shuffle {


}
.col-md-4, .shuffle-item, .shuffle-item--visible{
  float:left !important;
  position:realative !important;
}
  .shape .shape__space {
    width: 40px;
    height: 40px;
    
 }

.shape--blue .shape__space {
  background-color: #3498DB;
  border-bottom-color: #3498DB; }

.shape--red .shape__space {
  background-color: #E74C3C;
  border-bottom-color: #E74C3C; }

.shape--orange .shape__space {
  background-color: #F39C12;
  border-bottom-color: #F39C12; }

.shape--green .shape__space {
  background-color: #2ECC71;
  border-bottom-color: #2ECC71; }

.shape--circle .shape__space {
  border-radius: 50%; }

.shape--diamond .shape__space {
  -webkit-transform: rotate(45deg) scale(0.70711);
          transform: rotate(45deg) scale(0.70711); }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.0/shuffle.js"></script>

    
<div class="container">
        <div id="pagination-long"></div>
  <button class="btn btn-info"> Remove</button>
    <button class="btn btn-warning"> Return</button>
    </div>

<div class="container">

  <div class="filter-options filter-options--compound row">



    <div class="col-6@sm">
      <div class="filter-group filter-group--compound js-shapes">
        <h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
        <span class="ib">
          <input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
        </span>
      </div>
    </div>

  </div>
</div>
  <div class="container">
<div class="row dingo">

      <div class="col-md-4 mb-2 shape animated shape--circle shape--blue" data-shape="circle" data-color="blue" data-size="20">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">0</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--diamond shape--red" data-shape="diamond" data-color="red">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">1</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--triangle shape--green" data-shape="triangle" data-color="green">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">2</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--triangle shape--orange" data-shape="triangle" data-color="orange">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">3</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--square shape--red" data-shape="square" data-color="red">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">4</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--diamond shape--green" data-shape="diamond" data-color="green">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">5</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--circle shape--red" data-shape="circle" data-color="red">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">6</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--square shape--green" data-shape="square" data-color="green">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">7</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--circle shape--orange" data-shape="circle" data-color="orange">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">8</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--diamond shape--blue" data-shape="diamond" data-color="blue">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">9</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--square shape--orange" data-shape="square" data-color="orange">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">10</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--square shape--blue" data-shape="square" data-color="blue">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">11</div>
          </div>
        </div>
      </div>
<div class="col-md-4 mb-2 shape animated shape--circle shape--blue" data-shape="circle" data-color="blue" data-size="20">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">12</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--diamond shape--red" data-shape="diamond" data-color="red">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">13</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--triangle shape--green" data-shape="triangle" data-color="green">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">14</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--triangle shape--orange" data-shape="triangle" data-color="orange">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">15</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--square shape--red" data-shape="square" data-color="red">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">16</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--diamond shape--green" data-shape="diamond" data-color="green">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">17</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4 mb-2 shape animated shape--circle shape--red" data-shape="circle" data-color="red">
        <div class="card">
          <div class="card-body">
            <div class="shape__space">18</div>
          </div>
        </div>
      </div>
    </div>
</div>