JSFiddle - React, Tailwind, and code Playground

by willystyle

HTML

<div class="delete-object"></div>
<button id="deleteBtn">Delete the pink box</button>

CSS

.delete-object {
  width: 100px;
  height: 100px;
  background-color: pink;
}
.confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
}
.confirm-inner {
  background-color: white;
  width: 300px;
  max-width: 100%;
  padding: 10px;
}
.confirm h2 {
  margin-bottom: 10px;
}
.confirm button {
  color: white;
  cursor: pointer;
  padding: 10px;
  margin: 0;
  border: 0;
  border-radius: 2px;
}
.confirm .yesBtn {
  background-color: green;
}
.confirm .noBtn {
  background-color: red;
}
.confirm-footer {
  text-align: right;
}

JavaScript

const deleteBtn = document.getElementById('deleteBtn');
const obj = document.querySelector('.delete-object');

deleteBtn.addEventListener('click', () => {

 const confirm = document.createElement('div');
 document.body.appendChild(confirm);
 confirm.className = 'confirm';
 confirm.innerHTML = `
 		<div class="confirm-inner">
      <h2>Are you sure?</h2>
      <div class="confirm-footer">
        <button class="yesBtn" onclick="deleteObj()">Yes</button>
        <button class="noBtn" onclick="cancelConfirm()">No</button>
      </div>
    </confirm>
 `
})

function deleteObj() {
   obj.style.display = 'none';
   document.body.removeChild(document.querySelector('.confirm'))
 }
function cancelConfirm() {
	document.body.removeChild(document.querySelector('.confirm'))
}