Javascript onclick: only works once

Here is the method I call, where I delete the event by id:

function delete_event(id)
{
    $.ajax({
        url: "/delete/"+id,
        type: "post",
        data: {  '_token': '' },
        success: function(data) {
            if (data.success == 1)
            {
                $("#alert").addClass("alert alert-success");
                $("#alert").innerText = "it worked";
                $("#alert").remove();
                $("alert").fadeOut(3000);
            }
            else
            {
                $("#alert").addClass("alert alert-danger");
                $("#alert").text("it didn't work");
                $("#alert").delay(3000).fadeOut(1000);
            }
        },
        error: function(data)
        {
            console.log("neieieiin");
            console.log(data);
        },
        complete: function(){}
    })
}

Here is the HTML-Code:

<div id="alert">
</div>

<table class="table table-striped">
    <tr>
        <th>Event Name</th>
        <th>Starting Date</th>
        <th>Location</th>
        <th>Actions</th>
    </tr>

    @foreach($events as $event)
        <tr id="">
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a>
                    <button onclick="delete_event()" type="button" class="btn btn-default">
                    <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                </a>
            </td>
        </tr>
    @endforeach

</table>
@endsection

When I click the delete button it only once shows it worked/it didn't work. If I click it a second time nothing happens any suggestions?

via AppleForTheKing