what is the best practice for removing HTML modals?

I’m currently setting a background transparent mask with an onclick event-listener that will launch a delete modal function.

the drawback is the hindering of other event-listener elements in the page, since the modal and its mask have the highest z-index, i could give all clickable elements a high index, but then i will have to call a delete model function each time an element gets triggered whether the modal exists or not.

i’m contemplating creating a function that will add a delete modal event-listener on every element in the page with each creation of a modal, then remove all them when said modal is delete.

so how should i go about this?