JSFiddle - React, Tailwind, and code Playground

by Daniel Ribeiro

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table id="sample" class="reference" style="width:100%">
    <div id="dialog">
        Voce deseja excluir esta linha?
</div>    
    <tbody>
        <tr>
            <th>Number</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
            <th>Delete</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
            <td>
                <button id="cancel-1" destination-id="1" type="button" class="btn btn-danger" style="position: relative;"><span class="entypdestination-ido-cancel-squared"></span>&nbsp;&nbsp;Remover</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
            <td>
                <button id="cancel-2" destination-id="2" type="button" class="btn btn-danger" style="position: relative;"><span class="entypdestination-ido-cancel-squared"></span>&nbsp;&nbsp;Remover</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>Adam</td>
            <td>Johnson</td>
            <td>67</td>
            <td>
                <button id="cancel-3" destination-id="3" type="button" class="btn btn-danger" style="position: relative;"><span class="entypdestination-ido-cancel-squared"></span>&nbsp;&nbsp;Remover</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>
                <button id="cancel-4" destination-id="4" type="button" class="btn btn-danger" style="position: relative;"><span class="entypdestination-ido-cancel-squared"></span>&nbsp;&nbsp;Remover</button>
           ...

CSS

/*
Orange:			EE872A
Green:			8AC007
Lightgreen:		e5eecc
Blue:			40B3DF
DarkGreyBg:		555555
LightGreyBg:	f1f1f1 F6F4F0
GreyBorder:		D4D4D4
Pink:			B4009E
*/
 html {
    overflow-y:scroll;
}
body {
    font-size:14px;
    color:#404040;
    background-color:#f1f1f1;
    margin:0px;
}
body, p, h1, h2, h3, h4, table, td, th, ul, ol, textarea, input {
    font-family:verdana, helvetica, arial, sans-serif;
}
iframe {
    margin:0px;
}
img {
    border:0;
}
table, th, td, input, textarea {
    font-size:100%;
}
h1 {
    font-size:28px;
    margin-top:0px;
    font-weight:normal
}
h2 {
    font-size:22px;
    margin-top:10px;
    margin-bottom:10px;
    font-weight:normal
}
h3 {
    font-size:17px;
    font-weight:normal
}
h4 {
    font-size:12px;
}
h5 {
    font-size:11px;
}
h6 {
    font-size:10px;
}
h1, h2, h3, h4, h5, h6 {
    background-color:transparent;
    color:#000000;
}
#top {
    width:1220px;
    margin:auto;
    height:60px;
}
#topLogo {
    text-align:left;
    float:left;
    margin-top:20px;
    margin-left:10px;
}
#searchSection {
    height:60px;
    margin-right:0px;
    margin-top:5px;
    text-align:left;
}
#searchText {
    color:#777777;
    font-size:11px;
    font-style:italic;
    padding-top:3px;
}
#translateSection {
    height:30px;
}
#topnav {
    height:25px;
    background-color:#d3d3d3;
}
#topnavTut {
    height:20px;
    width:1190px;
    margin:auto;
    word-spacing:12px;
    font-size:12px;
    padding-left:10px;
    padding-right:20px;
    padding-top:5px;
    background-color:#d3d3d3;
}
a.topnav:link, a.topnav:visited {
    color:#555555;
    text-decoration:none;
}
a.topnav:hover, a.topnav:active {
    color:#ff4800;
    text-decoration:none;
}
#topnavSpace {
    margin-left:290px;
}
#belowTopnav {
    width:1220px;
    margin:auto;
}
#page {
    width:1024px;
    float:left;
    margin-left:10px;
    margin-top:10px;
    padding-top:10px;
    padding-bottom:20px;
    box-shadow: 0px 0px 20px 3px #d3d3d3;
    border-radius:4px;
  ...

JavaScript

$(".btn-danger").off();
$(".btn-danger").on("click", function () {
    
    var clickedBtn = $(this);

    $('#dialog').dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Yes": function () {
                $(this).dialog("close");
                clickedBtn.parents("tr").remove();
                $.ajax({
                    type: "DELETE", 
                    url: "process.php", 
                    dataType: "text", 
                    data: myData, 
                    success: function (response) {
                        //on success, hide  element user wants to delete.
                        
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        //On error, we alert user
                        alert(thrownError);
                    }
                });
            },
                "no": function () {
                $(this).dialog("close");
            }
        }
    });


});