Список задач остается пустым, когда вы его очищаете, потому что вы перезаписываете коллекцию HTML пустым массивом.Вы назначили document.getElementsByTagName("li"); на tasks, который является живой коллекцией.Переназначение [] для него даст ему неживой пустой массив.Вместо того, чтобы визуально скрывать задачи с помощью tasks[i].style.display="none и вручную сбрасывать коллекцию tasks, вы должны удалить каждый элемент задачи из DOM и позволить обновлению вашей живой коллекции автоматически.
Удаление коллекции из DOM имеетнекоторые подводные камни, но, как правило, они могут быть выполнены следующим образом:
while(tasks.length > 0) {
tasks[0].parentNode.removeChild(tasks[0]);
}
Ваши прослушиватели событий не добавляются, потому что код, который добавляет их, запускается только один раз, когда загружается скрипт.И, конечно же, в случае, когда скрипт загружен, в списке нет задач.Добавьте прослушиватель событий к отдельному newItemList при первом добавлении.
Убедитесь, что вы удалили задачу из DOM, а не просто скрыли ее.
newItemList.onclick = function removeTask() {
newItemList.parentNode.removeChild(newItemList);
console.log("removed");
}
Ваш полный JavaScript может выглядеть так:
let listGro = document.getElementById("list");
let aButton = document.getElementById("add");
let cButton = document.getElementById("clear");
let tasks = document.getElementsByTagName("li");
aButton.onclick = function addItem() {
let newThing = prompt("What do you want to add?"); // asking what the person wants
if (newThing) { // checking if the user actually added something
let newItemList = document.createElement("li"); //create item list
newItemList.className = "item";
let newItemListText = document.createTextNode(newThing); // create text
newItemList.appendChild(newItemListText); // append text
newItemList.onclick = function removeTask() {
newItemList.parentNode.removeChild(newItemList);
console.log("removed");
}
listGro.appendChild(newItemList); // append new element
console.log(`New task added\nNumber of tasks in the list: ${tasks.length}`);
} else {
alert("You can't add nothing");
}
};
cButton.onclick = function clearList() {
var conf = confirm("Are you sure you want to clear the list?");
if (conf && tasks.length != 0) {
while(tasks.length > 0) {
tasks[0].parentNode.removeChild(tasks[0]);
}
}
};