Javascript-форум - Добавить кнопку удалить для ячеек таблицы

Есть простенький ToDo лист. Задания хранятся в localStorage. Хочу напротив каждого задания добавить кнопку Удалить, которая бы удаляла конкретное задание из массива, в котором хранятся задания вытащены из localStorage, и в самом localStorage. Но как продумать логику, чтобы конкретное задание удалялось?!
1) Cами кнопки я добавил:

var tdDelete = document.createElement('td');
    tdDelete.innerHTML = '<button>Удалить</button>';
    table.appendChild(tdDelete); //"Навигация"

2) Дальше нужно выбрать из DOM кнопки
3) ???
4) Профит
Код HTML:

<body>
    <p>Введите заголовок: <input type="text" id="setName"></p>
    <p>Введите описание: <input  type="text"  id="setText"></p>
    <button id="setValue">Добавить</button>
    <hr>
    <h3>Список идей:</h3>
<table>
  <thead>
    <tr>
        <th>Название</th>
        <th>Описание</th>
        <th>Навигация</th>
    </tr>
  </thead>
  <tbody id="tableBody">

  </tbody>
</table>
<br>
<button id="del">Очистить</button>
</body>

Код JS:

var localStorageArray = [];
// получаем из localStorage данные
if(localStorage.getItem('todo')!=undefined){
    localStorageArray = JSON.parse(localStorage.getItem('todo'));
    echo();
}
console.log(localStorageArray);
// получаем данные из формы
document.getElementById('setValue').onclick = function(){
    var temp = {};
    var text = document.getElementById('setText').value;
    var name = document.getElementById('setName').value;
    if(text != '' && name != '') {
        temp.name = name;
        temp.text = text;
        // temp.check = 'false';
        var i = localStorageArray.length;
        localStorageArray[i] = temp;
        echo();
        localStorage.setItem('todo', JSON.stringify(localStorageArray));
    } else {
        alert('Заполните все поля');
    }
}
// выводим данные из массива, создавая ячейки в таблице
function echo() {
    document.getElementById('tableBody').innerHTML = ""; // очищаем контейнер
    var table = document.getElementById('tableBody');
    // выводим данные из массива
    for (const key in localStorageArray){
    var tr = document.createElement('tr'); //создаем еще строку
    table.appendChild(tr);
    var tdLeft = document.createElement('td'); // создаем столбец
    tdLeft.innerHTML = localStorageArray[key].name;
    var tdRight = document.createElement('td'); // создаем столбец
    tdRight.innerHTML = localStorageArray[key].text;
    // кнопка удалить
    var tdDelete = document.createElement('td');
    tdDelete.innerHTML = '<button>Удалить</button>';
    // добавляем элементы на страницу
    table.appendChild(tdLeft);  // "Название"
    table.appendChild(tdRight); //"Описание"
    table.appendChild(tdDelete); //"Навигация"

    }
}
document.getElementById('del').onclick = function(){
    localStorageArray = [];
    localStorage.clear();
    location.reload();
}

[].forEach.call(document.querySelectorAll('button#idTable'), function(el){ el.addEventListener('click', function () { var tr= this.parentNode.parentNode; tableBody.deleteRow(tr.rowIndex); }) });

<body> <p>Введите заголовок: <input type="text" id="setName"></p> <p>Введите описание: <input type="text" id="setText"></p> <button id="setValue">Добавить</button> <hr> <h3>Список идей:</h3> <table id="tbl"> <thead> <tr> <th>Название</th> <th>Описание</th> <th>Навигация</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> <br> <button id="del">Очистить</button> </body>

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body> <p>Введите заголовок: <input type="text" id="setName"></p> <p>Введите описание: <input type="text" id="setText"></p> <button id="setValue">Добавить</button> <hr> <h3>Список идей:</h3> <table id="tbl"> <thead> <tr> <th>Название</th> <th>Описание</th> <th>Навигация</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> <br> <button id="del">Очистить</button> <script> var localStorageArray = []; var tr, tdLeft, tdRight, tdDelete; // получаем из localStorage данные if(localStorage.getItem('todo')!=undefined){ localStorageArray = JSON.parse(localStorage.getItem('todo')); echo(); } // получаем данные из формы document.getElementById('setValue').onclick = function(){ var temp = {}; var text = document.getElementById('setText').value; var name = document.getElementById('setName').value; if(text != '' && name != '') { temp.name = name; temp.text = text; // temp.check = 'false'; var i = localStorageArray.length; localStorageArray[i] = temp; echo(); localStorage.setItem('todo', JSON.stringify(localStorageArray)); } else { alert('Заполните все поля'); } } // выводим данные из массива, создавая ячейки в таблице function echo() { document.getElementById('tableBody').innerHTML = ""; // очищаем контейнер var table = document.getElementById('tableBody'); // выводим данные из массива for (const key in localStorageArray){ tr = document.createElement('tr'); //создаем еще строку table.appendChild(tr); tdLeft = document.createElement('td'); // создаем столбец tdLeft.innerHTML = localStorageArray[key].name; tdRight = document.createElement('td'); // создаем столбец tdRight.innerHTML = localStorageArray[key].text; // копка удалить tdDelete = document.createElement('td'); tdDelete.innerHTML = `<button class="idTable">Удалить</button>`; // добавляем элементы на страницу tr.appendChild(tdLeft); // "Название" tr.appendChild(tdRight); //"Описание" tr.appendChild(tdDelete); //"Навигация" } [].forEach.call(document.querySelectorAll('button.idTable'), function(el){ el.addEventListener('click', function () { var tr= this.parentNode.parentNode; var index = tr.rowIndex - 1 tableBody.deleteRow(index); localStorageArray.splice(index, 1); localStorage.setItem('todo', JSON.stringify(localStorageArray)); }) }); } document.getElementById('del').onclick = function(){ localStorageArray = []; localStorage.clear(); location.reload(); } </script> </body> </html>