const onRemoveNode = event =>
  event.target.remove()

const addListener = element =>
  element.addEventListener('click', onRemoveNode)

const listItems = document.querySelectorAll('li')
listItems.forEach(addListener)

const addNewItem = () => {
  // Create the DOM elements
  // "new Date()" 
  const text = `New Item ${new Date()}`
  const textEl = document.createTextNode(text)
  const itemEl = document.createElement('li')
  
  // IMPORTANT:
  // the trick is that for each new item that
  // we generate, we also need to add the
  // event listener, if we want to be able
  // to remove it with the click!
  //
  // See how easy it is?
  // Expecially because we have prepared a
  // cool elper function that shorten our
  // coding!
  addListener(itemEl)
  
  // Append the elements to one another
  // so to create the correct structure
  itemEl.appendChild(textEl)
  document.querySelector('ul').appendChild(itemEl)
}

document
  .querySelector('button')
  .addEventListener('click', addNewItem)