I’m working on a simple to-do list application using HTML, CSS and Javascript. I’ve encountered an issue when trying to delete tasks from the task list. I’m trying to implement a feature where clicking on the delete button removes the corresponding task item from the list but it’s not working as expected. The delete button appears correctly, but when clicked it does not remove the task item from the list. I’ve also implemented the functionality to store the tasks i the local storage so that they can persist even after the page has been refreshed but this doesn’t seem to be working either. When I refresh the page, the tasks are not refreshed from the local storage.

This is my Javascript code.

const taskInput = document.getElementById("taskInput");
const taskForm = document.getElementById("taskForm");
const appContainer = document.querySelector(".todo-app");
taskForm.addEventListener("submit", function (event) {
  event.preventDefault();
});

function addTask() {
  if (taskInput.value === "") {
    alert("Please input a task!");
  } else {
    let tasksWrapper = document.createElement("div");
    tasksWrapper.className = "tasks-wrapper";

    let taskItem = document.createElement("div");
    taskItem.className = "task-item";
    tasksWrapper.appendChild(taskItem);

    let checkboxContainer = document.createElement("div");
    checkboxContainer.className = "checkbox-container";
    taskItem.appendChild(checkboxContainer);

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.onclick = function () {
      if (checkBox.checked) {
        taskText.classList.add("checked");
      } else {
        taskText.classList.remove("checked");
      }
    };
    checkboxContainer.appendChild(checkBox);

    let taskText = document.createElement("span");
    taskText.innerHTML = taskInput.value;
    taskItem.appendChild(taskText);

    let controlButtons = document.createElement("div");
    controlButtons.className = "controls";
    taskItem.appendChild(controlButtons);

    let editButton = document.createElement("button");
    editButton.innerHTML = '<i class="fa-regular fa-pen-to-square"></i>';
    editButton.className = "edit-button";
    editButton.onclick = function () {
      taskText.contentEditable = true;
    //   taskText.focus();
    };
    controlButtons.appendChild(editButton);

    taskText.onblur = function () {
      taskText.contentEditable = false;
    };

    let deleteButton = document.createElement("button");
    deleteButton.innerHTML = '<i class="fa-regular fa-trash-can"></i>';
    deleteButton.className = "delete-button";
    deleteButton.onclick = function () {
      taskForm.removeChild(tasksWrapper);
    };

    controlButtons.appendChild(deleteButton);

    appContainer.appendChild(tasksWrapper);
  }

  taskInput.value = "";
}

function saveData() {
  localStorage.setItem("data", tasksWrapper.innerHTML);
}

function showTask() {
  tasksWrapper.innerHTML = localStorage.getItem("data");
}
saveData();
showTask();

I’ve tried debugging the code and reviewing similar questions but I’m still not able to identify error causing this. Could someone please review my code and provide guidance on how to resolve this issues with deleting tasks and saving to local storage.
Thanks in advance.