update row striping after removing element

Question

I am making a todo-list. And I added row striping on it, which worked.
Now when I delete a task it should update the row striping, which it does not.
After deleting an element instead of being eg. white white beige it should update to white beige white.
I have a tried a lot of things but I couldn't get anything to work. To be fair I am new to all of this and not quite experienced in working with row striping.
Is there even a way to do it?

Here is what I have so far:

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

deleteTask can be

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