Как применить делегирование к данному коду?

Question

[Swaer]

<button class="start">Start</button>
<div class="dada">
  <ul>
    
  </ul>
</div>

div {
  margin: 0 auto;
  width:500px;
}
li {
  position:relative;
  list-style-type: none;
  background:lime;
  height: 45px;
  margin: 0;
}
li:nth-child(odd) {
  background:green;
}
span {
  padding:12px;
  position:absolute;
  right:0;
  top:0;
  background:red;
}
span:hover {
  background:black;
}

var li = document.querySelectorAll('li');
var span = document.querySelectorAll('.close');
for (var i = 0; i < span.length; i++) {
  span[i].addEventListener('click', removeLi);
}

function removeLi(){
  this.parentNode.removeChild(this);
  console.log(this);
}

var start = document.querySelector('.start');

start.addEventListener('click', addLi);

function addLi(){
  var li = document.createElement('li');
  var ul = document.querySelector('ul');
  li.addEventListener('click', removeLi);
  li.innerHTML = '<span class="close">&#10006;</span>';
  ul.appendChild(li);
}

Хочу чтобы при нажатии на крестик удалялся элемент Li, он то удаляется, но ещё он удаляется если нажать на Li тоже, в итоге я отследил таргет и если нажимаешь на спан, он нажимается на Li

Answer 1

[lavezzi1]

https://jsfiddle.net/5pestL7h/