I'm building a to-do list. Almost everything works; new to-dos gets pushed to top, when "X" button is clicked, the to-do is gone. My problem is that I couldn't get a new todo created with the delete "X" on the right hand side.

My full codes are here:
<https://codepen.io/paddlepop18/pen/Orevvp?editors=0010>

I tried placing the delete function on the global scope but it didn't work, and I thought placing it under "createListItem function" would help because it is the parent of the delete function.

I've tested with a "console.log function" and it works perfectly. 

This is just the Delete function codes:

```
function addListItem() { 
todoInputEl.addEventListener("keypress", function(event) {
    if (event.keyCode === 13) {
        let newListItem = createListItem(todoInputEl.value);
        todoListEl.insertBefore(newListItem, 
        todoListEl.childNodes[0]);
        // let newDeleteXX = createDeleteX(todoItemEls);    
        todoListEl.insertBefore(newDeleteXX, 
        // toDeleteEls.childNodes[0]);

        todoInputEl.value = "";
    }
})    

}
function createDeleteX(todoItemEls) {
    const newDeleteX = document.createElement("button");
    newDeleteX.className= "to__delete";
    newDeleteX.textContent = "X";
    return newDeleteX;
}

```

I have to comment out all the lines relating to the delete function in the addListItem() function because if I don't, any new input will not be cleared after pressing the Enter Key.