so I am making a to-do list. When you remove a task from the red trash button, it asks you if you want to delete it or not. And “cancel” should remove the question and the task will stay. But it doesn’t, the question stays and I have looked everywhere, but nothing works and the question doesn’t disappear. Can you help me with removing the question when you click “cancel”. Here is code(JS):
document.addEventListener('DOMContentLoaded', () => {
const textareaEle = document.getElementById('j');
textareaEle.addEventListener('input', () => {
textareaEle.style.height = 'auto';
textareaEle.style.height = `${textareaEle.scrollHeight}px`;
});
function myFunction(){
const body = document.getElementById("body");
const whole = document.getElementById("whole");
const dif = document.getElementById("dif");
const div = document.getElementById("copy");
const sauce = document.getElementById("sauce");
const textareaEle = document.getElementById('j');
let checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox", "class", "checkbox");
let paragraph = document.createElement("p");
paragraph.setAttribute("class", "checkbox");
let konq = document.createTextNode(textareaEle.value);
let line = document.createElement("br");
const hr = document.createElement("hr");
hr.setAttribute("id", "hr")
let sauceItem = document.createElement("div");
let del = document.createElement("input");
del.setAttribute("class", "del",)
del.src = "trash2.png";
del.type = "image";
sauceItem.classList.add("sauce-item");
let sauceI = document.createElement("div");
sauceI.classList.add("sauce-i");
paragraph.appendChild(konq);
sauceI.appendChild(hr);
sauceItem.appendChild(checkbox);
sauceItem.appendChild(paragraph);
sauceItem.appendChild(del);
sauceItem.appendChild(line);
sauce.appendChild(sauceItem);
sauce.appendChild(sauceI);
del.onclick = function(){
let popup = document.createElement("div");
popup.setAttribute("id", "overlay")
let textche = document.createElement("p");
textche.textContent = "Are you sure you want to delete it? Once removed, it can't be restored."
let r = document.createElement("button");
r.textContent = "remove"
r.setAttribute("id", "r")
c = document.createElement("button");
c.textContent = "cancel"
c.setAttribute("id", "c")
hhr = document.createElement("hr");
hhr.setAttribute("id", "hrr")
popup.appendChild(textche);
popup.appendChild(hhr);
popup.appendChild(r);
popup.appendChild(c);
sauce.appendChild(popup);
c.onclick = function() {
//cancel pop up
}
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title of the document</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="body">
<script src="index.js"></script>
<div id="dif">
<p1 id="f">To-do list</p1>
<hr>
<div id="copy">
<textarea type="text" id="j" placeholder="Enter here" rows="1"></textarea>
<button id="e" onclick="myFunction()">Add</button>
<hr>
<div id="sauce">
</div>
</div>
</div>
</body>
</html>