livewire remove pic preview

i'm kinda new to livewire uploading i can't seem to find out a way to remove single image from the ones to upload. how can i remove a single image from preview?

currently it looks like this https://prnt.sc/vcuz7k

sorry for messy code

<div class="mb-4 flex-row js box" x-data="{ droppedfiles: false, dropping: false, uploading: false, success: false }"
                x-on:drop.prevent="droppedfiles = event.dataTransfer.files; dropping = false; @this.uploadMultiple('photos', droppedfiles)"
                x-on:livewire-upload-start="uploading = true"
                x-on:livewire-upload-finish="uploading = false; success = true"
                x-on:dragover.prevent="dropping = true"
                x-on:dragenter.prevent="dropping = true"
                x-on:dragend.prevent="dropping = false"
                x-on:dragleave.prevent="dropping = false"
                :class="{ 'is-dragover': dropping, 'is-uploading': uploading, 'is-success': success } " >
                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
                    Upload Images
                </label>
                <div class="box__input">
                    <input class="box__file" type="file" wire:model="photos" name="photos" id="file"
                       multiple />
                    <label for="file"><strong>Choose files</strong></label>
                </div>
                <div class="preview-box flex-wrap">
                    @if ($photos)
                    @foreach ($photos as $photo)
                    <div class="w-3/12 inline-flex">
                        <span  wire:click="{{  }}" class="absolute self-start justify-self-end bg-black z-10 m-4"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></span>
                        <img width="300px" class="p-2 m-2 relative" src=" {{ $photo->temporaryUrl() }}" />
                    </div>
                    @endforeach
                    @endif
                </div>
                
            </div>

edit: solved with alpine on click as live:click wasn't working

<div class="preview-box flex-wrap">
                    @if ($photos)
                    @foreach ($photos as $photo)
                    <div class="w-3/12 inline-flex">
                        <span  x-on:click="@this.removeUpload('photos', '{{ $photo->getFilename() }}', () => {}, () => {})" class="absolute self-start justify-self-end bg-black z-10 m-4"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></span>
                        <img width="300px" class="p-2 m-2 relative" src=" {{ $photo->temporaryUrl() }}" />
                    </div>
                    @endforeach
                    @endif
                </div>