JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<button id="addnew">add new</button>

<ul id="coverlist">
    <li><a href="#" class="dox">x</a></li>
    <li><a href="#" class="dox">x</a></li>
    <li><a href="#" class="dox">x</a></li>
</ul>

CSS

ul {margin: opx; padding: 0px; list-style-type: none;}
li { float: left; height: 100px; width: 70px; background-color: #ccc; margin: 5px; }

li a { float: right; margin-top:3px; margin-right: 3px; color: #fff; font-weight: bold; }

JavaScript

$('#addnew').click(function(){

    var li = $('<li />');
    var bgc = rd();
    li.css('background-color', bgc);
    li.html('<a href="#" class="dox">x</a>');
    
    li.appendTo( $('ul#coverlist') );
});

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

$('ul#coverlist').on('click','a.dox', function(){
    $(this).parent().remove();
});