Java Script вывести количество элементов в списке

'use strict';
const input = document.querySelector('#input-main');
const ul = document.querySelector('.list');
let li = document.querySelectorAll('.list li');
let tasks = [];

input.addEventListener('keypress', function (event) {
  if (input.value === '') {
    document.querySelector('#input-main').placeholder = 'Введите задачу...';
  } else {
    if (event.key === 'Enter') {
      newTask();
    }
  }
});

let newTask = () => {
  if (input.value !== '') {
    let task = document.createElement('li'),
      link = document.createElement('a'),
      newTask = input.value;
    task.innerHTML = newTask;
    link.appendChild(task);
    ul.appendChild(link);
    input.value = '';

    //Кнопка удалить
    let span = document.createElement('SPAN'),
      spanText = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(spanText);
    link.appendChild(span);

    let filter = document.querySelector('.filter-list');
    filter.style.display = 'flex';

    //Чекбоксы
    let checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = 'checkbox-id';
    link.appendChild(checkbox);
    ul.appendChild(link);
    //Всего задач
    let allTask = document.querySelector('.all-count'),
      list = document.querySelectorAll('.list > a');
    tasks.push(list);
    
    // -------------- Дописано:
    updateCount();

    //Функция удаления задачи
    span.addEventListener('click', function (event) {
      if (event.target.tagName === 'SPAN') {
        let close = event.target.parentNode;
        close.remove();
        
        // -------------- Дописано:
        tasks.splice( tasks.indexOf(list), 1 );
        updateCount();
      }
    });
  }
};

// -------------- Дописано:
function updateCount(){
    let allTask = document.querySelector('.all-count');
    let count = tasks.length;
    allTask.textContent = `Всего задач: ${[count]}`;
}

body,
ul {
  margin: 0;
  padding: 0;
}

.todo {
  margin: 0 auto;
  max-width: 600px;
  margin-top: 80px;
}

.app {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
header h1 {
  font-size: 50px;
  color: green;
  opacity: 0.5;
  font-weight: 600;
  margin-bottom: 30px;
  font-family: sans-serif;
}

input {
  width: 100%;
  padding: 15px;
  outline: none;
}

input.new-todo {
  font-size: 20px;
  padding: 14px 14px 14px 42px;
}

.list.editing #text {
  display: none;
}

.list.editing .new-todo {
  display: block;
}

ul.list {
  display: block;
}

.list {
  font-size: 26px;
  display: none;
}

.list li {
  padding: 14px;
  border: 1px solid #ccc;
  border-top: none;
  color: green;
}

.list li:hover {
  background-color: rgba(217, 245, 236, 0.973);
}

ul li.checked {
  background: rgb(158, 123, 123);
  color: #fff;
  text-decoration: line-through;
}

.close {
  position: relative;
  top: -43px;
  right: 15px;
  float: right;
  color: red;
  cursor: pointer;
  display: block;
  width: 20px;
  visibility: hidden;
}

ul#list-id.list a:hover span.close {
  visibility: visible;
}

.edit {
  float: right;
  position: relative;
  right: 75px;
  top: 6px;
  visibility: hidden;
  size: 10px;
  cursor: pointer;
  color: rgba(153, 102, 8, 0.584);
  display: block;
  font-size: 17px;
  text-align: center;
}

.list a .close:hover {
  visibility: visible;
}

#checkbox-id {
  float: left;
  width: 30px;
  margin: 7px;
  position: relative;
  top: -42px;
  font-size: 17px;
}

.checked {
  text-decoration: line-through;
  background-color: indianred;
}

#count {
  float: left;
  color: #969595;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

ul.filter-list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 5px;
  display: none;
}
.all-count {
  float: left;
  position: relative;
  left: -119px;
  color: #969595;
}
.filter-list li {
  padding: 5px;
  margin: 5px;
}

.filter-list a {
  color: #969595;
}

.arrow img {
  width: 3%;
  float: left;
  display: block;
  position: relative;
  top: 39px;
  left: 10px;
}

.arrow {
  position: relative;
  top: 36px;
  z-index: 1;
  left: 14px;
  cursor: pointer;
}

<div class="todo">
  <section class="app">
    <header>
      <h1>TODO LIST</h1>
      <div class="wripper-input">
        <i class="arrow" id="arrow-btn"
          ><img src="img/arrow.svg" alt=""
        /></i>
        <input
          id="input-main"
          type="text"
          class="new-todo"
          autofocus=""
          placeholder="Есть важные дела?"
        />
      </div>
    </header>
    <section class="main">
      <ul id="list-id" class="list"></ul>
    </section>
    <footer class="footer">
      <ul class="filter-list">
        <li class="all-count"></li>
        <li id="count"><a href="#"></a></li>
        <li><a href="#">Все</a></li>
        <li><a href="#">Активные</a></li>
        <li id="complated"><a href="#">Завершенные</a></li>
      </ul>
    </footer>
  </section>
</div>