do list app but the problem is I added on click function when the delete button build but in the function side nothing works most of the time I get e is undefined i checked all other pages but none of them have worked so far

let input_text = document.getElementById("input_text");
let Addbutton = document.getElementById("Addbutton");
let workList = document.getElementById("workList");
let xicon = '<i class="fa-regular fa-circle-xmark"></i>';
let checkicon = '<i class="fa-regular fa-circle-check"></i>';
Addbutton.onclick = function () {
  if (input_text.value === "") {
    alert("Please type something");
  } else {
    let newDiv = document.createElement("div");
    let newLabel = document.createElement("label");
    workList.appendChild(newDiv);
    newDiv.classList.add("workDiv");
    newDiv.appendChild(newLabel);
    newLabel.innerText = input_text.value;
    let newDiv2 = document.createElement("div");
    newDiv.appendChild(newDiv2);
    newDiv2.classList.add("buttonDiv");
    let newButton = document.createElement("button");
    newDiv2.appendChild(newButton);
    newButton.innerHTML = xicon;
    newButton.setAttribute("onclick", "Delete()");
    let newButton2 = document.createElement("button");
    newDiv2.appendChild(newButton2);
    newButton2.innerHTML = checkicon;

    input_text.value = "";
  }
};
function Delete(e) {
  e.parentNode.parentNode.removeChild(e.parentNode);
}

html Part

<section
        id="workList"
        class="mt-4 pl-2 h-fit w-11/12 flex flex-col gap-2"
      >
<div class="workDiv"><label>todlapp1</label><div class="buttonDiv"><button onclick="Delete()"><i class="fa-regular fa-circle-xmark" aria-hidden="true"></i></button><button><i class="fa-regular fa-circle-check" aria-hidden="true"></i></button></div></div>
</section>

i treated online guides and YouTube but non of them have worked so far i want when i click on the Delete Button it removes the main div that holds the task