JSFiddle - React, Tailwind, and code Playground

HTML

<table class="oldService">
    <thead>
        <tr>
           <th>name</th>
           <th>age</th>
           <th>action</th>
        </tr>
    </thead>    
    <tbody>
        <tr><td>Name</td><td>Age</td><td id="1" class="delme">X</td></tr>
        <tr><td>Name</td><td>Age</td><td id="2" class="delme">X</td></tr>
        <tr><td>Name</td><td>Age</td><td id="3" class="delme">X</td></tr>
        <tr><td>Name</td><td>Age</td><td id="4" class="delme">X</td></tr>
        <tr><td>Name</td><td>Age</td><td id="5" class="delme">X</td></tr>
    </tbody>
</table>

CSS

td { width: 50px; }
td.delme { cursor: pointer; }

JavaScript

jQuery('table.oldService').delegate('td.delme', 'click', function() {
    if(jQuery(this).parent().siblings(":not(.del)").length === 0) return;
    if(!confirm('want to delete!')) return;
    
    jQuery.get('deleteService.php', { id:this.id });
    jQuery(this).parent().addClass('del').fadeTo(400, 0, function() {
        jQuery(this).remove();
    });
});