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()

});