Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

artisticre's avatar

Livewire Modal Delete Not Closing

I have this working as far as it is deleting but won't close after delete.

<a href="#" wire:click="deleteCategory({{$category->id}})" data-toggle="modal" data-target="#deleteModal-{{$category->id}}"><i class="fa fa-trash fw-bold text-danger"></i></a>
                            
                            
                                    <!--Delete Modal --> 

  <div wire:ignore.self class="modal fade" id="deleteModal-{{$category->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Delete Category</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <form wire:submit.prevent="destroyCategory">
          
      <div class="modal-body">
        <h6>Are You Sure You Want To Delete This Category?</h6>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Delete</button>
      </div>
</form>
    </div>
  </div>
</div>

 <script>
		window.addEventListener('close-modal', event => {
            $('#deleteModal').modal('hide');
        });
	</script>
             

Index.php

public $category_id;



    public function deleteCategory($category_id)
    {
        $this->category_id = $category_id;
    }

    public function destroyCategory()
    {
        $category = Category::find($this->category_id);
        $path = 'backend/uploads/categories/'.$category->image;
        if(File::exists($path)){
           File::delete($path) ;
        }
        $category->delete();
        toastr('success','Category Deleted Successfully');
        $this->dispatch('close-modal');
    }


    public function render()
    {
        $categories = Category::orderBy('id','DESC')->paginate(10);
        return view('livewire.admin.category.index',['categories'=>$categories]);
    }

0 likes
1 reply
jlrdw's avatar

Are you saying even when clicking button the modal doesn't hide?

Otherwise make a close modal function that's auto called.

I use:

function closeModal() {
    document.getElementById("myModal").style.display = "none";
}

Can be used from a click event or just called as a function.

Please or to participate in this conversation.