产品编辑页面删除图片时页面自动刷新问题的修正求助

Let's fix that annoying redirect issue when deleting images on your product edit page! The problem stems from three key oversights: unblocked default button behavior, incorrect DOM selection in your AJAX callback, and a minor redundancy in your controller method. Here's how to fix each one step by step:

1. Stop the Button from Triggering a Form Submit #

By default, <button> elements inside a form act as submit buttons. When you click "Remove", it's triggering a full form submit that redirects you to the product list. Fix this in one of two ways:

Option A: Add type="button" to your Remove button #

Update your view code for the Remove button to explicitly mark it as a non-submit button:

<button class="removeimg" type="button" data-id="{{$image->id}}" data-token="{{ csrf_token() }}">Remove</button>

Option B: Prevent default behavior in JavaScript #

If you prefer not to modify the HTML, add e.preventDefault() to your click handler to block the default form submission:

$(document).on('click', '.removeimg',function(e){
    e.preventDefault(); // Block the default form submit action
    var confirmation = confirm("are you sure to remove this record?");
    // Rest of your code...
});

2. Fix the DOM Removal in AJAX Success Callback #

Your current code tries to remove the .photo element via $obj.parents('.photo'), but .photo is the image itself—not a parent of the button. Instead, target the <p> container that holds both the image and the button to remove the entire entry:

Update your AJAX success callback and add error handling for better debugging:

success: function (res) {
    $obj.closest('p').remove(); // Remove the container holding the image and button
    console.log("Image deleted successfully!", res);
},
error: function(xhr) {
    console.log("Delete failed:", xhr.responseText);
    alert("Oops, couldn't delete the image. Please try again.");
}

Also, move the misplaced console.log("It failed"); into the error callback—right now it runs every time, even when the AJAX succeeds!

3. Clean Up the Controller Method #

Your delete() call has an unnecessary $id parameter. When you call Image::find($id), you get the model instance, so just call delete() without passing anything. We'll also add a check to handle cases where the image doesn't exist:

public function imgdelete($id){
    $image = Image::find($id);
    
    if(!$image){
        return response()->json([
            'error'=> 'Image not found!'
        ], 404);
    }
    
    $image->delete();
    return response()->json([
        'success'=> 'Image deleted successfully!'
    ]);
}

Full Corrected Code Snippets #

Updated View #

<div class="col-sm-4"> 
    <label>Other Images</label> 
    <div class="input-group control-group img_div form-group" > 
        <input type="file" name="image[]" class="form-control"> 
        <div class="input-group-btn"> 
            <button class="btn btn-success btn-add-more" type="button">Add</button> 
        </div> 
    </div> 
</div> 
<div>
    @foreach($image as $image) 
        <p>
            <img src="{{asset('/files/'.$image->images)}}" height="50px" id="{{$image->id}}" class="photo"/> 
            <button class="removeimg" type="button" data-id="{{$image->id}}" data-token="{{ csrf_token() }}">Remove</button>
        </p> 
    @endforeach 
</div>

Updated AJAX #

$(document).ready( function () { 
    $(document).on('click', '.removeimg',function(e){
        e.preventDefault();
        var confirmation = confirm("are you sure to remove this record?");
        if (confirmation) { 
            var id = $(this).data("id"); 
            var token = $(this).data("token"); 
            var $obj = $(this); 
            
            $.ajax( { 
                url: "{{ url('image/delete') }}/"+id, 
                type: 'post', 
                dataType: "JSON", 
                data: { 
                    "id": id, 
                    "_token": token, 
                }, 
                success: function (res) { 
                    $obj.closest('p').remove(); 
                    console.log("Image deleted!", res); 
                },
                error: function(xhr) {
                    console.log("Delete error:", xhr.responseText);
                    alert("Failed to delete image.");
                }
            }); 
        } 
    }); 
});

Updated Controller #

public function imgdelete($id){
    $image = Image::find($id);
    
    if(!$image){
        return response()->json([
            'error'=> 'Image not found!'
        ], 404);
    }
    
    $image->delete();
    return response()->json([
        'success'=> 'Image deleted successfully!'
    ]);
}

内容的提问来源于stack exchange，提问作者Neha_Soni