JSFiddle - React, Tailwind, and code Playground

by Руслан Абсалямов

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button>Click me</button>
<div class="row executer-index panel">
        <div class="col-lg-4 col-md-4 col-sm-4 client">
            <div>
                <div class="caption">
                    <p>Фамилия имя: Иванов Иван</p>
                    <p>Телефон: +7911111233</p>
                    <p>email: [email protected]</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 client">
            <div>
                <div class="caption">
                    <p>Фамилия имя: Иванов Иван</p>
                    <p>Телефон: +7911111233</p>
                    <p>email: [email protected]</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 client">
            <div>
                <div class="caption">
                    <p>Фамилия имя: Иванов Иван</p>
                    <p>Телефон: +7911111233</p>
                    <p>email: [email protected]</p>
                </div>
            </div>
        </div>
    </div>

CSS

.panel{
  margin: 10px;
}
.remove{
  float: right;
}

JavaScript

$('.client').hover(function(){
	$(this).prepend('<div class="remove">Remove</div>').show('fast')
},
function(){
	$('.remove').remove();
});

$('body').on('click' ,'.remove', function(){
	$(this).parent().remove();
})