JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

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

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

JavaScript

$("a").bind("click",function(){
    var row = $(this).parents('tr:first');
    console.log( row );
    row.hide();
});