I am creating a basic todo list app using vanilla typescript. After appending buttons to each list item, I want the items to delete when the user clicks the button on a specific list item. To execute this, I tried adding a 2nd addEventListener method in index.ts to listen for remove button clicks, then remove the child of the parent element. My addEventListener method looks like this:

listItemBtn.addEventListener("click", (e: Event) => {
  const element = e.target as HTMLUListElement;
  element.removeChild(element);
});

However, I keep getting an error in the console that says "Uncaught TypeError: Cannot read property ‘addEventListener’ of null". I am not sure why I can’t append .addEventListener to listItemBtn without errors. Any idea how to fix this?

Here is a link to the project in CodeSandBox: https://codesandbox.io/s/vanilla-typescript-forked-xnnf4

Source: Angular Questions