Как добавить кнопку удалить к записям в таблице?

Question

[uRoot]

Есть следующий код ToDo листа: codepen.io

У меня не получается добавить кнопку Удалить к каждой записи в таблице. Вне зависимости от того на какую кнопку кликнули, удаляются последовательно только теги tr: кликнул один раз - удалился тег tr в первой строке, второй раз - во второй строке, хотя при этом кликаешь на другие. При этом вложенные теги td остаются.
Код удаления:

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

Кнопка Удалить в DOM добавляется так:

tdDelete = document.createElement('td');
tdDelete.innerHTML = `<button class="idTable">Удалить</button>`;
table.appendChild(tdDelete);

Я хочу удалять записи из таблицы, массива и localStorage.

Comments

[lloydbanks]

У вас tr.rowIndex // undefined поскольку при клике на "добавить" добавляются ячейки без строк.

Answer 1

[0xD34F]

удаляются последовательно только теги tr <...> вложенные теги td остаются

Не вложенные. Давайте повнимательнее взглянем на создание новой строки в таблице:

table.appendChild(tr);
<...>
table.appendChild(tdLeft);  // "Название"
table.appendChild(tdRight); //"Описание"
table.appendChild(tdDelete); //"Навигация"

Ячейки у вас добавляются непосредственно в tbody, а вовсе не в tr.

Кроме того, обработчики клика по кнопкам удаления у вас добавляются один раз, при загрузке страницы, то есть кнопки всех добавленных пользователем строк обработчиков клика иметь не будут. Вам следует освоить такой приём, как делегирование.

UPD. Исправлено.

Comments

[uRoot]

Спасибо за решение. У вас кстати кнопка Удалить удаляет не текущую запись, а следующую:

3	3	Удалить
5	5	Удалить

Кнопка напротив 3 удалить запись с 5, а 5 не удалить ничего. В коде:
const index = e.target.closest('tr').rowIndex; добавил -1:
const index = e.target.closest('tr').rowIndex -1; и всё заработало как нужно :)