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