Javascript-форум - Удаление элементов по одному

Здравствуйте!
Не могу справиться с удалением элементов из списка после добавления. Функция removeTask работать в таком варианте не хочет. Может как-то переписать строку (" <button onclick='removeTask(" + i + ")'>x</button></li>"), чтобы обработчик событий отдельно повесить в js файле?
Код вот такой(просто список дел):

/document.addEventListener("DOMContentLoaded", function () {

let tasks = [];

const btnAddTask = document.getElementById("addTask");
const btnClearA = document.getElementById("btnClearA");
//const btnRemTask = document.getElementById("btnRemTask");

btnAddTask.addEventListener("click", addTask);
btnClearA.addEventListener("click", clearAll);
//btnRemTask.addEventListener("click", removeTask);

//Add a task
function addTask() {
	let taskInput = document.getElementById("task");
	let text = taskInput.value;
	if (text === "") {
		return;
	}
	tasks.push(text);
	taskInput.value = "";
	saveTasks();
	displayTasks();
}

// Function to Display tasks
function displayTasks(){
	let html = "";
	for (let i = 0; i <tasks.length; i++) {
		html += "<li>" + tasks[i] + 
		" <button onclick='removeTask(" + i + ")'>x</button></li>";
	}
	document.getElementById("list").innerHTML = html;
}


// Function to Remove a task
function removeTask(i) {
	tasks.splice(i, 1);
	saveTasks();
	displayTasks();
}

// Function to Clear all tasks
function clearAll() {
	tasks = [];
	saveTasks();
	displayTasks();
}

// Function to Save tasks
function saveTasks() {
	localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Function to Load tasks
function loadTasks() {
  let saved = localStorage.getItem("tasks");
  if (saved !== null) {
    tasks = JSON.parse(saved);
  }
}

// Load and display tasks when page loads
loadTasks();
displayTasks()

});

<!DOCTYPE html> <html> <body> <h1>JavaScript Project</h1> <h2>To-Do List</h2> <input id="task" placeholder="New task"> <button id="addTask">Add</button> <ul id="list"></ul> <button id="btnClearA">Clear All</button> <p id="message"></p> <script src="List.js"></script> </body> </html>

// Function to Display tasks function displayTasks() { document.getElementById("list").innerHTML = ''; for (let i = 0; i < tasks.length; i++) { let li = document.createElement("li"); li.textContent = tasks[i]; let button = document.createElement("button"); button.textContent = "x"; button.addEventListener("click", function() { removeTask(" + i + "); }); li.append(button) document.getElementById("list").append(li); } }

<ul id="list"> <li> Задание 1 <button>X</button> </li> <li> Задание 2 <button>X</button> </li> <li> Задание 3 <button>X</button> </li> <li> Задание 4 <button>X</button> </li> </ul> <script> list.addEventListener('click', removeTask) // Function to Remove a task function removeTask(e) { const o = e.target.closest('button') if (!o) return const i = [...list.querySelectorAll('li')].indexOf(o.closest('li')) if (i < 0) return alert(i) // далее все твои действия... /* tasks.splice(i, 1); saveTasks(); displayTasks(); */ } </script>