---
layout: default
title: Shuffle Adding and Removing Elements Demo
description: This demo of shuffle shows how to add and removing items.
image: /demos/adding-removing.jpg
extraJS: [ "demos/adding-removing.js" ]
---
<style>

  /* Styles for shuffle */
  .container {
    counter-reset: boxes;
  }

  .box {
    position: relative;
    width: 18%;
    margin-left: 2.5%;
    height: 100px;
    margin-top: 20px;
    float: left;
    background: #E74C3C;
    counter-increment: boxes;
  }

  .box::before {
    content: 'DOM order: ' counter(boxes);
    position: absolute;
    color: white;
    top: .5em;
    left: .5em;
  }

  .box::after {
    content: 'Box SKU: ' attr(created);
    position: absolute;
    color: white;
    bottom: .5em;
    left: .5em;
  }

  .box.shuffle-item,
  .box:first-child {
    margin-left: 0;
  }

  .w2 {
    width: 38.5%;
  }

  .w3 {
    width: 59%;
  }

  .h2 {
    height: 220px;
  }
</style>

<section class="container">
    <div class="row">
        <h2 class="col-12@sm">Adding and Removing Items</h2>
    </div>
</section>

<section class="container">
  <div style="margin-bottom: 10px;">
    <span class="filter__label">Add mode:</span>
    <select id="mode" class="sort-options">
      <option value="end">Add to end</option>
      <option selected value="end-sequential">Add to end with delay</option>
      <option value="mix">Mix in with current</option>
    </select>
  </div>
  <div class="pull-left">
    <button id="add">Add 5 Boxes</button>
    <button id="remove">Remove Some Boxes</button>
    <button id="randomize">Randomize</button>
  </div>
  <div class="pull-right">
    <span class="filter__label">Sort:</span>
    <select id="sorter" class="sort-options">
      <option value="dom">Default</option>
      <option value="created">Box SKU</option>
      <option value="random">Randomize</option>
    </select>
  </div>
</section>

<section class="container">
    <div id="my-shuffle" class="items">
        <div class="box" created="45"></div>
        <div class="box h2 w2" created="19"></div>
        <div class="box" created="66"></div>
        <div class="box" created="148"></div>
        <div class="box w2" created="99"></div>
        <div class="box" created="3"></div>
    </div>
</section>

<section class="container">
  <div class="row">
    <div class="col-12@sm">
      <h2>Shuffle.js</h2>
    <p>{{ site.longDescription }}</p>
    </div>
  </div>
</section>