JSFiddle - React, Tailwind, and code Playground

by bjelline

HTML

<table>
    <tr>
        <td>Alice</td>
        <td> <a href="/echo/json/1" class="deletes">Delete</a>

        </td>
    </tr>
    <tr>
        <td>Bob</td>
        <td> <a href="/echo/json/2" class="deletes">Delete</a>

        </td>
    </tr>
    <tr>
        <td>Chris</td>
        <td> <a href="/echo/json/3" class="deletes">Delete</a>

        </td>
    </tr>
</table>
<pre id="output">nothing happened yet.
</pre>

JavaScript

$(".deletes").click(function (e) {
    var r = confirm("are you sure you want to delete this");

    if (r == true) {
        $this = $(this);
        e.preventDefault();
        var url = $(this).attr("href");
        $('#output').append('calling backend ' + url);
        $.post(url, function (r) {
            $('#output').append('ajax returned');

            if (r.success) {
                $('#output').append('with success');

                $this.closest("tr").remove();
            }
        })
    } else {
        return false;
    }

});