Delete Confirm (CRUD)
- Default delete confirmation modal
- Delete confirmation with items list
- Confirm delete with alert
- Delete confirmation with icon
- Delete confirmation with input field
- Confirm delete with checkbox
Get started with a collection of delete confirmation modal components based on the CRUD layout to make sure the user is ready to remove a selected item.
- Requires Flowbite JS
Default delete confirmation modal
Use this free example of a modal component coded with Tailwind CSS to confirm with the user before deleting an item from the database.
Default delete confirmation modal
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="deleteButton"
data-modal-target="deleteModal"
data-modal-toggle="deleteModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show delete confirmation
</button>
</div>
<!-- Main modal -->
<div
id="deleteModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<button
type="button"
class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="deleteModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
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 class="sr-only">Close modal</span>
</button>
<svg
class="text-gray-400 dark:text-gray-500 w-11 h-11 mb-3.5 mx-auto"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
<p class="mb-4 text-gray-500 dark:text-gray-300">
Are you sure you want to delete this item?
</p>
<div class="flex justify-center items-center space-x-4">
<button
data-modal-toggle="deleteModal"
type="button"
class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
No, cancel
</button>
<button
type="submit"
class="py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
Yes, I'm sure
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('deleteButton').click()
})Delete confirmation with items list
This example can be used to show the list of items that you are about to delete from the database inside a modal component.
Delete confirmation with items list
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="deleteListButton"
data-modal-target="deleteListModal"
data-modal-toggle="deleteListModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show delete confirmation
</button>
</div>
<!-- Main modal -->
<div
id="deleteListModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<button
type="button"
class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="deleteListModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
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 class="sr-only">Close modal</span>
</button>
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
Are you sure?
</h3>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
You are about to delete the following 3 products, this cannot be undone:
</p>
<ul
role="list"
class="mb-4 space-y-2 text-left text-gray-500 sm:mb-5 dark:text-gray-400"
>
<li class="flex items-center space-x-2">
<svg
aria-hidden="true"
class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span>Apple iMac 27”</span>
</li>
<li class="flex items-center space-x-2">
<svg
aria-hidden="true"
class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span>Magic Keyboard</span>
</li>
<li class="flex items-center space-x-2">
<svg
aria-hidden="true"
class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span>Xbox Series X</span>
</li>
</ul>
<div class="flex items-center space-x-4">
<button
data-modal-toggle="deleteListModal"
type="button"
class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
No, cancel
</button>
<button
type="submit"
class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-4 h-4 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Yes, delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('deleteListButton').click()
})Confirm delete with alert
Use this example to show an alert message inside the delete confirmation modal component to reveal the consequences of removing an item from the database.
Confirm delete with alert
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="deleteAlertButton"
data-modal-target="deleteAlertModal"
data-modal-toggle="deleteAlertModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show delete confirmation
</button>
</div>
<!-- Main modal -->
<div
id="deleteAlertModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<button
type="button"
class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="deleteAlertModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
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 class="sr-only">Close modal</span>
</button>
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
Confirm user removal
</h3>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Are you sure you want to delete this user from the Flowbite platform?
</p>
<div
class="p-4 mb-4 text-sm text-left text-orange-700 bg-orange-100 rounded-lg sm:mb-5 dark:bg-gray-700 dark:text-orange-300"
role="alert"
>
<div class="items-center mb-1">
<svg
class="inline flex-shrink-0 mr-1 w-4 h-4"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Danger</span>
<span class="font-semibold leading-none">Warning</span>
</div>
<p>
By deleting this user 6 associated posts will also be permanently
deleted.
</p>
</div>
<div class="flex justify-center items-center space-x-4">
<button
data-modal-toggle="deleteAlertModal"
type="button"
class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
No, cancel
</button>
<button
type="submit"
class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-4 h-4 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Yes, confirm delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('deleteAlertButton').click()
})Delete confirmation with icon
This example of a modal component can be used to show a descriptive icon and a warning message before proceeding with an item removal from the database.
Delete confirmation with icon
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="deleteIconButton"
data-modal-target="deleteIconModal"
data-modal-toggle="deleteIconModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show delete confirmation
</button>
</div>
<!-- Main modal -->
<div
id="deleteIconModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div
class="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<button
type="button"
class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="deleteIconModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
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 class="sr-only">Close modal</span>
</button>
<div
class="flex justify-center items-center p-2 mx-auto mb-4 w-12 h-12 bg-gray-100 rounded-lg dark:bg-gray-700"
>
<svg
class="w-8 h-8 text-gray-500 dark:text-gray-400"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Danger icon</span>
</div>
<p class="text-gray-900 dark:text-white mb-3.5">
<span class="text-primary-600 dark:text-primary-500">@bonniegr</span>,
are you sure you want to delete this product from platform?
</p>
<p class="mb-4 font-light text-gray-500 dark:text-gray-300">
This action cannot be undone.
</p>
<div class="flex justify-center items-center space-x-4">
<button
data-modal-toggle="deleteIconModal"
type="button"
class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
No, cancel
</button>
<button
type="submit"
class="py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
Yes, delete
</button>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('deleteIconButton').click()
})Delete confirmation with input field
Use this example to double check a delete action by typing the name of the item inside a text input field.
Delete confirmation with input field
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="deleteFormButton"
data-modal-target="deleteFormModal"
data-modal-toggle="deleteFormModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show delete confirmation
</button>
</div>
<!-- Main modal -->
<div
id="deleteFormModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-lg h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
<div class="flex justify-between items-center py-4 px-4 sm:px-5">
<h3
class="text-lg font-semibold leading-none text-gray-900 dark:text-white"
>
Are you sure?
</h3>
<button
type="button"
class="text-gray-400 bg-transparent absolute top-2.5 right-2.5 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="deleteFormModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
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 class="sr-only">Close modal</span>
</button>
</div>
<p
class="py-4 px-4 font-light text-orange-700 bg-orange-100 border-t border-b border-orange-200 sm:px-5 dark:border-gray-600 dark:bg-gray-700 dark:text-orange-300"
>
Unexpected bad things can happen if you don’t read this!
</p>
<div class="py-4 px-4 sm:px-5 sm:py-5">
<p class="font-light text-gray-500 dark:text-gray-400">
This action
<span class="font-semibold text-gray-900 dark:text-white"
>CANNOT</span
>
be undone. This will permanently delete the
<span class="font-semibold text-gray-900 dark:text-white"
>bergside/flowbite-library</span
>
file, wiki, issues and comments, and remove all collaborator
assosiations.
</p>
<form action="#">
<div class="mt-2 mb-4">
<label
for="repository-name-input"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Please type in the name of the repository to confirm.</label
>
<input
type="text"
id="repository-name-input"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
placeholder="Ex. bergside/flowbite-library"
/>
</div>
<button
type="submit"
class="justify-center py-2 px-3 w-full text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
I understand, delete this repository
</button>
</form>
</div>
</div>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('deleteFormButton').click()
})Confirm delete with checkbox
Use this example to require a checkbox selection from the user before proceeding with the deletion of an item from the database.
Confirm delete with checkbox
html
<!-- Modal toggle -->
<div class="flex justify-center m-5">
<button
id="deleteAlertButton"
data-modal-target="deleteAlertModal"
data-modal-toggle="deleteAlertModal"
class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="button"
>
Show confirm delete
</button>
</div>
<!-- Main modal -->
<div
id="deleteAlertModal"
tabindex="-1"
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-md h-full md:p-0 md:h-auto">
<!-- Modal content -->
<form
action="#"
class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
>
<button
type="button"
class="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="deleteAlertModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
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 class="sr-only">Close modal</span>
</button>
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
Remove 15 items?
</h3>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
If you remove them, it may delete these questions account and activity.
These questions can also no longer request info about you on Flowbite.
</p>
<div
class="p-4 mb-4 text-sm text-left text-gray-500 bg-gray-100 rounded-lg sm:mb-5 dark:bg-gray-700 dark:text-gray-400"
role="alert"
>
<div class="flex">
<input
id="confirm-checkbox"
type="checkbox"
value=""
class="mt-1 w-4 h-4 bg-gray-50 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
required
/>
<label for="confirm-checkbox" class="ml-2 text-sm"
>Also delete
<span class="font-medium text-gray-900 dark:text-white"
>all posts, photos and videos</span
>
on Flowbite that 15 questions may have published on your
behalf.</label
>
</div>
</div>
<div class="flex items-center space-x-4">
<button
data-modal-toggle="deleteAlertModal"
type="button"
class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
>
Cancel
</button>
<button
type="submit"
class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
>
<svg
aria-hidden="true"
class="w-4 h-4 mr-1.5 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path>
</svg>
Yes, delete
</button>
</div>
</form>
</div>
</div>js
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById('deleteAlertButton').click()
})