JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div class="wrap">
    <ul id="list"></ul>
</div>
<button id="add">Add</button>
<button id="remove">Remove</button>

CSS

div.wrap {
    width: 330px;
    text-align: center;
}
ul#list {
    margin: 0;
}
ul#list > li {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid blue;
    list-style-type: none;
}

.animatein { animation: .4s fadein; }
.animateout { animation: .4s fadeout; }

@keyframes fadein {
    from { opacity: 0; left: 100px; }
    to { opacity: 1; left: 0px; }
}

@keyframes fadeout {
    from { opacity: 1; left: 0px; }
    to { opacity: 0; left: 100px; }
}

JavaScript

function addItem(list, newItem) {
    newItem.insertAdjacentHTML('beforeEnd', 'X');
    list.appendChild(newItem);
    newItem.classList.add('animatein');
}

function removeItem(list){
    var oldItem = null;
    if (list.childNodes.length > 0){
        oldItem = list.childNodes[list.childNodes.length - 1];
        oldItem.classList.remove('animatein');
        oldItem.classList.add('animateout');
        oldItem.addEventListener('animationend', function(){
            list.removeChild(oldItem);
        });
    }
}

var list = document.getElementById('list');
var newItem = document.createElement('li');

var button = document.getElementById('add');
var removeButton = document.getElementById('remove');
button.addEventListener('click', function () {
    addItem(list, newItem.cloneNode());
});
removeButton.addEventListener('click', function(){
    removeItem(list);
});