JSFiddle - React, Tailwind, and code Playground

HTML

<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row1</div>
</div><br>
<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row1</div>
</div><br>
<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row1</div>
</div><br>
<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row1</div>
</div><br>

<div class="pai-del-menu">Delete</div>

CSS

.row{
        padding: 4px;
        margin: 4px;
        border: 1px solid #777;
    }

    .pai-del-row{
        cursor: pointer;
    }

    .pai-del-menu{
        padding: 4px;
        color: #000;
        border-radius: 5px;
        background-color: #eee;
        width: 80px;
        text-align: center;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
        position: fixed;
        z-index: 999;
        cursor: pointer;
    }

JavaScript

var pai_to_delete = null;

    $(document).ready(function(){
        $('.pai-del-menu').hide();
        //$('del-menu')
    });
    $(".pai-del-row").click(function(e){
        var pai_x = e.pageX;
        var pai_y = e.pageY;

        $('.pai-del-menu').css({left: pai_x, top: pai_y});

        $('.pai-del-menu').show();
        $('.pai-del-menu').attr('tabindex',-1).focus();
        pai_to_delete = $(this).parent();
    });

    $('.pai-del-menu').blur(function(){
        $(this).hide();
        pai_to_delete = null;
    });

    $('.pai-del-menu').click(function(){
        $(this).hide();
        pai_to_delete.remove();
    });