In this tutorial, we will learn how to remove products from a wishlist.

Let's explore the process of removing products from a wishlist.

Creating a Function in the Wishlist Controller

First, go to the Wishlist Controller and create a function:

public function removeProductFromWishlist(Request $request)
{
    $rowId = $request->rowId;
    Cart::instance(`wishlist`)->remove($rowId);
    return redirect()->route('wishlist.list');
}

Defining a Route for Removing Products

Next, create a route for this:

Route::delete('/wishlist/remove',[WishlistController::class,'removeProductFromWishlist'])->name('wishlist.remove');

Creating a Form in the Wishlist View

Now, go to the wishlist.blade.php file and create a form:

<form id=`deleteFromWishlist` action=`{{route('wishlist.remove')}}` method=`POST`>
    @csrf
    @method('delete')
    <input type=`hidden` id=`rowId` name=`rowId` />
</form>

Creating a JavaScript Function

Create a JavaScript function:

@push('scripts')
    <script>
        function removeFromWishlist(rowId)
        {
            $(`#rowId`).val(rowId);
            $(`#deleteFromWishlist`).submit();
        }        
    </script>
@endpush

Calling the JavaScript Function

Call this function from the remove icon:

<a href=`javascript:void(0)` class=`icon` onclick=`removeFromWishlist('{{$item->rowId}}')`>
    <i class=`fas fa-times`></i>
</a>

Testing the Remove Product Functionality

Now that we've completed the setup, let's test it. Refresh the page and remove a product from the wishlist by clicking the icon. You will see that the product has been removed.

Clearing All Items from the Wishlist

Now, let's make the `Clear all items` link functional.

Creating a Function in the Wishlist Controller

Go to the Wishlist Controller and create a new function:

public function clearWishlist()
{
    Cart::instance(`wishlist`)->destroy();
    return redirect()->route('wishlist.list');
}

Defining a Route for Clearing All Items

Create a route for this function:

Route::delete('/wishlist/clear',[WishlistController::class,'clearWishlist'])->name('wishlist.clear');

Creating a Form in the Wishlist View

Go to the wishlist.blade.php file and add a form:

<form id=`clearWishlist` action=`{{route('wishlist.clear')}}` method=`POST`>
    @csrf
    @method('delete')
</form>

Creating a JavaScript Function

Add a JavaScript function:

@push('scripts')
    <script>
        function clearWishlist()
        {
            $(`#clearWishlist`).submit();
        }
    </script>
@endpush

Calling the JavaScript Function

Call this JavaScript function from the `Clear all items` link on click event:

<div class=`row`>
    <div class=`col-md-12 text-end`>
        <a href=`javascript:void(0)` onclick=`clearWishlist()`>Clear All Items</a>
    </div>
</div>

Testing the Clear All Items Functionality

Now that we've completed the setup, let's test it. Refresh the page and click the `Clear all items` link. You will see that all items have been removed from the wishlist.

By following these steps, you can successfully remove products from a wishlist.