JSFiddle - React, Tailwind, and code Playground

by joaoManolo

HTML

<table id="sample" class="reference" style="width:100%">
    <div id="dialog">
</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>
            </td>
        </tr>
    </tbody>
</table>

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

debugger;
$("body").on("click", "#response sample td button.btn-danger", function (e) {
    e.returnValue = false;
    var clickedID = this.id.split('-');
    var destinationId = clickedID[1];
    var myData = 'id='+ destinationId;

    var $tr = $(this).closest('tr');

    $('#dialog').dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Yes": function () {
                //$row.remove();
                $(this).dialog("close");

                $.ajax({
                    type: "DELETE", 
                    url: "process.php", 
                    dataType: "text", 
                    data: myData, 
                    success: function (response) {
                        //on success, hide  element user wants to delete.
                        $tr.find('td').fadeOut(1000, function () {
                            $tr.remove();
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        //On error, we alert user
                        alert(thrownError);
                    }
                });
            },
                "no": function () {
                $(this).dialog("close");
            }
        }
    });


});