Javascript-форум - Удаление из динамически созданной таблицы

Добрый день, при вводе данных в поля next и title в таблице появляются с данными и две кнопки удалить и редактировать. При нажатии на удаление строка должна удалиться, мой код, который в самом низу скрипта не работает( помогите пожалуйста исправить ошибку(

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- Bootstrap styles -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <!-- Font awesome -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
      integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar navbar-light bg-light mb-5">
      <span class="navbar-brand mb-0 h1">Todo app</span>
    </nav>
    <main>
      <div class="form-section">
        <div class="container">
          <div class="row">
            <div class="col-6 mx-auto form-col">
              <div class="card card-body">
                <form name="addTodoForm">
                  <div class="form-group">
                    <label for="title">Title</label>
                    <input
                      type="text"
                      name="title"
                      id="title"
                      class="form-control"
                    />
                  </div>
                  <!-- /.form-group -->
                  <div class="form-group">
                    <label for="text">Text</label>
                    <input
                      type="text"
                      name="text"
                      id="text"
                      class="form-control"
                    />
                  </div>
                  <!-- /.form-group -->
                  <button type="submit" class="btn btn-primary">
                    Add task
                  </button>
                </form>
              </div>
              <!-- /.card card-body -->
            </div>
            <!-- /.col-6 -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.container -->
      </div>
      <!-- /.form-section -->
      <div class="todos-table mt-5">
        <div class="container">
          <div class="row">
            <div class="col-8 mx-auto">
              <table class="table table-bordered">
                <thead>
                  <tr id="data">
                    <td>Title</td>
                    <td>Text</td>
                    <td>Controls</td>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <!-- /.col-8 mx-auto -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.container -->
      </div>
      <!-- /.todos-table -->
    </main>

    <!-- Scripts -->
    <script src="js/app.js"></script>
  </body>
</html>

[script]
(function() {
let storage = {
todos: []
};

const form = document.querySelector("form");
const title = document.querySelector("input#title");
const text = document.querySelector("input#text");
const table = document.querySelector("table");

form.addEventListener("submit", function(e) {
e.preventDefault();

if (!title.value || !text.value) return;
console.log("Введите text и title");

addNewTodoToStorage(generateId(), title.value, text.value);
form.reset();
});

/**
*
*/
function generateId() {
const words =
"0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASD FGHJKLZXCVBNM";
let id = "";

for (let char of words) {
let index = Math.floor(Math.random() * words.length);
id += words[index];
}

return id;
}

/**
*
* @param {*} title
* @param {*} text
*/
function addNewTodoToStorage(id, title, text) {
if (!title) return console.log("Введите заголовок задачи");
if (!text) return console.log("Введите текст задачи");

const newTask = {
title,
text,
id
};

storage.todos.push(newTask);
addNewTodoToView(newTask);

return storage.todos;
}

/**
*
* @param {*} id
*/
function deleteTodoFromStorage(id) {
if (!id) return console.log("Передайте id задачи");

const checkId = storage.todos.some(function(task, i) {
return task.id === id;
});
if (!checkId) return console.log("id несуществуе");

let removedTask;

for (let i = 0; i < storage.todos.length; i++) {
if (storage.todos[i].id === id) {
removedTask = storage.todos.splice(i, 1);
break;
}
}

return removedTask;
}

/**
*
* @param {*} id
* @param {*} title
* @param {*} text
*/
function editTaskStorage(id, title, text) {
deleteTodoFromStorage(id);
addNewTodoToStorage(id, title, text);
}

function addNewTodoToView(task) {
const template = todoTemplate(task);
table.insertAdjacentHTML("afterbegin", template);
}

function todoTemplate(task) {
return `<tr data-id='${task.id}'>
<td>${task.title}</td>
<td>${task.text}</td>
<td>
<i class="fas fa-trash"></i>
<i class="fas fa-edit"></i>
</td>
<tr>`;
}
//////////////////////////////////////
//let closeButton = document.createElement("i");
let closeButton = (document.className = "fas fa-trash");
console.log(data);
closeButton.onclick = function() {
data = document.getElementById(`${task.id}`);
closeButton.closest(data).remove();
};
})();
[/script]