JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<div id="container">
    <div class="image" id="image1" style="background-image:url(http://lorempixel.com/100/100/abstract);">
        <a href="#" class="delete">Delete</a>
    </div>
    <div class="image" id="image2" style="background-image:url(http://lorempixel.com/100/100/food);">
        <a href="#" class="delete">Delete</a>
    </div>
    <div class="image" id="image3" style="background-image:url(http://lorempixel.com/100/100/people);">
        <a href="#" class="delete">Delete</a>
    </div>
    <div class="image" id="image4" style="background-image:url(http://lorempixel.com/100/100/technics);">
        <a href="#" class="delete">Delete</a>
    </div>
</div>

JavaScript

$('a.delete').on('click',function(e){
        e.preventDefault();
        imageID = $(this).closest('.image')[0].id;
        alert('Now deleting "'+imageID+'"');
        $(this).closest('.image')
            .fadeTo(300,0,function(){
                $(this)
                    .animate({width:0},200,function(){
                        $(this)
                            .remove();
                    });
            });
    });