Есть простенький 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();
}