SOURCE

var rectArr = Array.from(document.getElementsByClassName('rect'));

var box = document.getElementById('box')
var delay = 1000
box.addEventListener('click', function(e){
    if(e.target === box) return
    let index = e.target.getAttribute('data-index')

    var moveArr = rectArr.splice(index, rectArr.length)

    moveArr.forEach(item => {
        item.preLeft = item.offsetLeft
        item.preTop = item.offsetTop
    })

    box.removeChild(e.target)

    moveArr.forEach(item => {
        item.style.transform = `translate(${item.preLeft - item.offsetLeft}px,${item.preTop - item.offsetTop}px)`
    })
    setTimeout(() => {
        moveArr.forEach(item => {
            item.style.transition = `transform ${delay}ms ease`
            item.style.transform = `translate(0, 0)`
        })
    }, 1)

    setTimeout(() => {
      moveArr.forEach(item => {
        item.style.transition = ``
        item.style.transform = ''
      })  
    }, delay + 1)

    rectArr = [...rectArr, ...moveArr]
})

<ul class="box" id="box">
    <li class="rect" data-index="01">01</li>
    <li class="rect" data-index="02">02</li>
    <li class="rect" data-index="03">03</li>
    <li class="rect" data-index="04">04</li>
    <li class="rect" data-index="05">05</li>
    <li class="rect" data-index="06">06</li>
    <li class="rect" data-index="07">07</li>
    <li class="rect" data-index="08">08</li>
    <li class="rect" data-index="09">09</li>
    <li class="rect" data-index="10">10</li>
    <li class="rect" data-index="11">11</li>
    <li class="rect" data-index="12">12</li>
    <li class="rect" data-index="13">13</li>
    <li class="rect" data-index="14">14</li>
    <li class="rect" data-index="15">15</li>
    <li class="rect" data-index="16">16</li>
    <li class="rect" data-index="17">17</li>
    <li class="rect" data-index="18">18</li>
    <li class="rect" data-index="19">19</li>
    <li class="rect" data-index="20">20</li>
    <li class="rect" data-index="21">21</li>
    <li class="rect" data-index="22">22</li>
    <li class="rect" data-index="23">23</li>
    <li class="rect" data-index="24">24</li>
    <li class="rect" data-index="25">25</li>
    <li class="rect" data-index="26">26</li>
    <li class="rect" data-index="27">27</li>
    <li class="rect" data-index="28">28</li>
    <li class="rect" data-index="29">29</li>
    <li class="rect" data-index="30">30</li>
    <li class="rect" data-index="31">31</li>
    <li class="rect" data-index="32">32</li>
    <li class="rect" data-index="33">33</li>
    <li class="rect" data-index="34">34</li>
    <li class="rect" data-index="35">35</li>
    <li class="rect" data-index="36">36</li>
</ul>

.box {
    width: 336px;
    height: 336px;
    box-shadow: 0 0 3px pink;
    list-style: none;
    padding: 0;
}
.rect {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 3px orange inset;
    margin: 3px;
    float: left;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
}