JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <thead>
            <tr>
                <th style="width:280px">Product</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <a href="#" onclick="remove_child(this);" style="cursor: pointer;">x</a>
                </td>
                <input type="hidden" name="shortone1" value="1" id="shortone1">
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="remove_child(this);" style="cursor: pointer;">x</a>
                </td>
                <input type="hidden" name="shortone2" value="2" id="shortone2">
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="remove_child(this);" style="cursor: pointer;">x</a>
                </td>
                <input type="hidden" name="shortone3" value="3" id="shortone3">
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="remove_child(this);" style="cursor: pointer;">x</a>
                </td>
                <input type="hidden" name="shortone4" value="4" id="shortone4">
            </tr>
        </tbody>
    </table>

JavaScript

(function(){
    $("a").bind("click",function(){
       if(confirm("Confirma a exclusĂŁo?")){
        var row = $(this).parents('tr:first');
        var table = row.parents('table:first');
        row.hide();
      }            
    });  
})();