How to use DOM to select an element that is not in HTML but created in JS using createElement() function

Question

I used document.createElement('div') to create a div. The element <i> is not in HTML, it's only created via JavaScript once the submit button is pressed as shown in the script. How can I fix this error so that when the button is pressed and the element shows up, I can click it to delete the divBox?

(the <i> element is basically delete button that once it's pressed it deletes the divBox)

const deleteBtn = document.querySelector(".fa-delete-left");
const divBox = document.querySelector(".divBox");

//Submit function
submit.addEventListener("click", () => {
  let message = document.createElement("div");

  if (userInput.value == "") {
    return false;
  } else {
    message.innerHTML = `<div class="divBox"></p>${userInput.value}
    <i class="fa-solid fa-delete-left"></i><p>${month} ${day} , ${year}</div>`;
  }
div.box.append(message)
});

deleteItem.addEventListener("click", () => {
  divBox.remove();
});

ERROR = Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.js:63:12