JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="mywrapper">
    <div id='CompanyID_0' runat="server" class="compName">
        <span class="btn btn-sm btn-success">ABC1</span>
        <a href="#" ID="lnkBtnRemove" class="btnRemove"><i class="fa fa-times"></i></a>
    </div>
    
    <div id='CompanyID_1' runat="server" class="compName">
        <span class="btn btn-sm btn-success">ABC222</span>
        <a href="#" ID="lnkBtnRemove" class="btnRemove"><i class="fa fa-times"></i></a>
    </div>
    
    <div id='CompanyID_2' runat="server" class="compName">
        <span class="btn btn-sm btn-success">ABC333</span>
        <a href="#" ID="lnkBtnRemove" class="btnRemove"><i class="fa fa-times"></i></a>
    </div>
</div>

CSS

div.mywrapper {
    margin : 15px;
}
a.btnRemove {
    display : none;
}
div.compName:hover a {
    display :inline-block;
}
div.mywrapper p {
    clear:both;
}
div.compName {
    margin-bottom:10px;
    float: left;
    clear: both;
}

JavaScript

$('.btnRemove').on('click', function(){
    var $button = $(this).parent();
    var id = $button.attr('id');
    
    var result = confirm('Are you sure you want to remove this company ?');
    if(result) {
        // You can use the var 'id' to get "CompanyID_0" for example
        
        $button.animate({
            'opacity': 0,
            'height': 0
        }, 500, function(){
            $button.remove();
        });
    }
});