Почему не срабатывает ajax?

Здравствуйте. Вот у меня есть элемент

            <div id="delete{{ $match->id }}" class="th-icon">
                <a href="#" class="uk-icon-button" uk-icon="trash"></a>
                <input type="hidden" value="{{ $match->id }}" name="id">
            </div>

по клику на него срабатывает этот ajax,

$( document ).ready(function() {
        $("#delete{{ $match->id }}").click(function(){
            var
                id = $('input[name="id"]').val();
            $.ajax({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url:'/delete',
                type:'POST',
                dataType:'json',
                data:{id: id},
                success: function(data)
                {
                    console.log(data);
                },
                error:function(data)
                {
                    console.log('2');
                }
            });
        });
    });

Вот контролер

public function destroy(Request $request)
    {
        $match = Match::find($request->id)->delete();
            return response()->json($match);
    }

Рут Route::post('/delete', 'Admin\MatchController@destroy');

Ajax данные передает, ошибок нету, по нажатию на элемент он должен удалить запись и сразу пропасть(запись), но запись пропадает после перезагрузки страницы. Как сделать, чтоб запись сразу же пропала?