Delete Image through Ajax without reloading page laravel

Question

I want to delete Image without reloading a page through Ajax but every time when I delete the Image, first it's not deleted but when I refresh the page the image can delete.

app.js:

$('.delete-image').on('click', function(e){
    e.preventDefault();
    let id = $(this).attr('data-id');
    bootbox.confirm("Are you sure you want to delete this company?", function(result){
        if(result){
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type : 'DELETE',
                url : '/albums/delete',
                data : {
                    id : id,
                },
                success : function(response){
                    if(response){
                        $(this).parents('.album').slideUp().remove();
                    }
                }.bind(this)
            })
        }
    }.bind(this));
});

AlbumController:

public function deleteImage(Request $request){
        $album = Album::find($request->id);
            if($album->delete())
                return response()->json(true);
            else
                return response()->json(false);
    }

blade.php:

@extends('layout.app')

@section('content')
    <div class='medium-3 columns end'>
        <div class="row text-center">
            @foreach($album as $albm)
                <h4>{{$albm->name}}</h4>
                <h4>{{$albm->description}}</h4>
                <a href="/albums/{{$albm->id}}" class="btn btn-link">Edit
                    <img class="thumbnail" src="/storage/store/{{$albm->cover_image}}" alt="{{$albm->name}}">
                </a>
                <a href="" class="btn btn-link delete-image" data-id="{{$albm->id}}">Delete</a>
                <br>
            @endforeach
        </div>
    </div>
@endsection

Route:

Route::delete('/albums/delete', 'AlbumController@deleteImage');

The best way of doing this is by hiding the image. Why do you want to delete an image at run-time if it will delete only for the current user? Or does this delete from the server? — Pholoso Mams, Aug 07 '18 at 13:33

score 1 · Answer 1 · answered Aug 07 '18 at 13:30

1

$(this).parents('.album').slideUp().remove();

You have no elements with class="album" so the selector won't match anything.

answered Aug 07 '18 at 13:30

Quentin

914,110
126
1,211
1,335

One more thing is if I delete one image page is not reloaded and the image is deleted. but other images do not show after deletion until the page refresh again? what do i now. – Haider Aug 07 '18 at 13:46

rkj · Answer 2 · 2018-08-07T14:37:02.360

After delete success response just delete its parent div that has class row

$('.delete-image').on('click', function(e){
    e.preventDefault();
    let id = $(this).attr('data-id');

    let parentDiv = $(this).closest('div.row');

    bootbox.confirm("Are you sure you want to delete this company?", function(result){
        if(result){
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type : 'DELETE',
                url : '/albums/delete',
                data : {
                    id : id,
                },
                success : function(response){
                    if(response){
                        $(parentDiv).remove();
                    }
                }.bind(this)
            })
        }
    }.bind(this));
});

Delete Image through Ajax without reloading page laravel

2 Answers2