JSFiddle - React, Tailwind, and code Playground

by scriptstar

HTML

<ul class="items">
    <li>
        <input type='text' /> <a href="#" class="delete last">remove</a>
    </li>
</ul>
<button class="append">Add item</button>
<!--[if lte IE 9]>
    <style type="text/css">
        /* Old IE doesn't support CSS transform or transitions */
        .items li {
            position: relative
        }
    </style>
<![endif]-->

CSS

body { font-family: Arial; overflow: hidden; }
.items { 
    list-style-type: none; padding: 0; position: relative;
    border: 1px solid black; height: 390px; overflow-y: auto; overflow-x: hidden;
    width: 300px;
}
.items li { 
    height: 50px; width: 100%; line-height: 50px; padding-left: 20px;
    border: 1px solid silver; background: #eee;
    position: absolute; top: 0; left: 0; 
    -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}

/* See later in the blog post for a cleaner way to generate these rules */
.items li:nth-child(1)  { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); }
.items li:nth-child(2)  { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
.items li:nth-child(3)  { -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); }
.items li:nth-child(4)  { -webkit-transform: translate3d(0, 300%, 0); transform: translate3d(0, 300%, 0); }
.items li:nth-child(5)  { -webkit-transform: translate3d(0, 400%, 0); transform: translate3d(0, 400%, 0); }
.items li:nth-child(6)  { -webkit-transform: translate3d(0, 500%, 0); transform: translate3d(0, 500%, 0); }
.items li:nth-child(7)  { -webkit-transform: translate3d(0, 600%, 0); transform: translate3d(0, 600%, 0); }
.items li:nth-child(8)  { -webkit-transform: translate3d(0, 700%, 0); transform: translate3d(0, 700%, 0); }
.items li:nth-child(9)  { -webkit-transform: translate3d(0, 800%, 0); transform: translate3d(0, 800%, 0); }
.items li:nth-child(10) { -webkit-transform: translate3d(0, 900%, 0); transform: translate3d(0, 900%, 0); }
.items li:nth-child(11) { -webkit-transform: translate3d(0, 1000%, 0); transform: translate3d(0, 1000%, 0); }
.items li:nth-child(12) { -webkit-transform: translate3d(0, 1100%, 0); transform: translate3d(0, 1100%, 0); }
.items li:nth-child(13) { -webkit-transform: translate3d(0, 1200%, 0); transform: translate3d(0, 1200%, 0); }
.items li:nth-child(14) { -webkit-transform:...

JavaScript

$(function () {
    $(document.body).on("click", ".delete", function (evt) {
        evt.preventDefault();
        $(this).hasClass("last") ? alert('You need to have atleast one choice..') : $(this).closest("li").remove();
    });

    $(".append").click(function () {
        var $li = $('ul li');
        $("<li><input type='text' /> <a href='#' class='delete'>remove</a></li>").insertAfter($li.last());
    });

    // Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
    $(".items").on("webkitTransitionEnd", function () {
        $(this).hide().offset();
        $(this).show();
    });
});