JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Disappearing objects</h1>

<input type="button" onclick="addObject()" value="Click to ad disappearing element">
<ul id="objList"></ul>

CSS

li {
    -moz-transition: opacity .5s, max-height .5s ease-out;
    background: yellow;
    display: block;
    max-height: 1.2em;
    overflow: hidden;
    margin: 0px;    
    }
ul {
    background:blue;
}

JavaScript

function SomeObj(delay) {
    this.delay = Math.round(delay);
    this.color = getRandomColor();
    this.text = 'Color: ' + this.color + ', Delay: ' + this.delay + ' ms.';
    this.node = document.createElement("li");
    this.node.style.color = this.color;
    this.node.innerHTML = this.text;
    document.getElementById('objList').appendChild(this.node);
    var instance = this;
    setTimeout(function () {
        instance.destroy();
    }, instance.delay);
}

SomeObj.prototype.destroy = function () {
    var instance = this;
    this.node.style.opacity = '0';
    this.node.style.maxHeight = '0px';
    setTimeout(function () {
        instance.node.parentNode.removeChild(instance.node);
    }, 500);


};

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function addObject() {
    new SomeObj(Math.random() * 1000 + 300);
}