how to access a element which is creating using createElement() out side a function in javascript

Question

const addTaskBtn = document.getElementById("add-task-btn")
const taskFieldEl = document.getElementById("addTask")
const ul = document.getElementById("task-list")
const para = document.getElementById("demo")


addTaskBtn.addEventListener("click", function () {
    // listItem = `
    // <li>
    // <input type="text">
    // </li>`
    // taskListEl.innerHTML = listItem

    //creating new elements when click on addTaskBtn
    let list = document.createElement("li")
    let span = document.createElement("span")
    let inputEl = document.createElement("input")
    let deleteBtn = document.createElement("button")
    let deleteBtnText = document.createTextNode("delete")
    deleteBtn.className = "myDelBtn"

    //adding text of taskfieldel to the inputEl
    inputEl.value = taskFieldEl.value
    taskFieldEl.value = ""

    //append all element to each other and lastly in the ul
    deleteBtn.appendChild(deleteBtnText)
    span.appendChild(inputEl)
    span.appendChild(deleteBtn)
    list.appendChild(span)
    ul.appendChild(list)
})

document.querySelector(".myDelBtn").addEventListener("click", function () {
    console.log("hello")
    document.getElementById("demo").innerHTML = "hello i am working"
})

i want to acces deleteBtn element which i created using createElement() dynamically out side the function i wrote this to access the element through className also i tried using id but its not working...

please help me in this