[删除元素后更新行条带

Question

我正在做一个待办事项清单。而且我在上面添加了行条带化功能。现在，当我删除一个任务时，它应该更新行条带，但它不会。删除元素后而不是例如。白色白色米色它应更新为白色米色白色。我已经尝试了很多东西，但是我什么都没做。公平地说，我对所有这些都是新手，并且在行条带化方面经验不足。甚至有办法吗？

这是我到目前为止的内容：

loadEvents();

function loadEvents() {
  document.querySelector('form').addEventListener('submit', submit);
  document.querySelector('ul').addEventListener('click', deleteOrTick);
}

function submit(a) {
  a.preventDefault();
  let input = document.querySelector('input');
  if (input.value != '')
    addTask(input.value);
  input.value = '';
}

function addTask(task) {
  let ul = document.querySelector('ul');
  let li = document.createElement('li');
  li.innerHTML = `<div class="input-group mb-3 row"><div class="col-11"><label>${task}</label></div>
    <span class="delete">x</span></div>`;
  ul.appendChild(li);
  document.querySelector('.allToDos').style.display = 'block';
}

function deleteOrTick(a) {
  if (a.target.className == 'delete')
    deleteTask(a);
}

function deleteTask(a) {
  let remove = a.target.parentNode;
  let parentNode = remove.parentNode;
  parentNode.removeChild(remove);
  event.stopPropagation();
}

ul {
  list-style-type: none;
}

li {
  font-size: 1.3em;
  color: #2f4f4f;
}

.todo li:nth-child(2n) {
  background: #e0d9c3;
}

.todo {
  width: 500px;
}

.delete {
  cursor: pointer;
}

<div class="container">
  <form action="index.html" method="post">
    <div class="heading">
      <h1 class="header">ToDo-List</h1>
      <p class="intro">Do what you do</p>
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" name="task" placeholder="Add a todo" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="submit">Add</button>
      </div>
    </div>
  </form>
</div>
<div class="container">
  <div class="allToDos ">
    <ul class="todo">
      <li>
        <div class="input-group mb-3 row">
          <div class="col-11">
            <label>hi was geht ab</label>
          </div>
          <span class="delete">x</span>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 1

document.querySelector('li').addEventListener('click',deleteOrTick); // not ul

function deleteTask(a){
    let remove = a.currentTarget;
    let parentNode = remove.parentNode;
    parentNode.removeChild(remove);
    a.stopPropagation(); //not event
}