Здравствуйте. Такая проблема. Пишу свой первый todo. Застопорился на работе с localStorage. У меня получается добавить элементы в него через массив, но как при клике на кнопку я должен удалять этот элемент из локала. Я думал удалять из массива, но также ничего не получается...
Вот мой код:
const addToDo = document.querySelector('.add-todo');
let toDoElements = [JSON.parse(localStorage.getItem('todo'))];
console.log(toDoElements);
window.addEventListener('load', function() {
document.querySelector('.todo-block').insertAdjacentHTML('beforeend', JSON.parse(localStorage.getItem('todo')));
OptionToDo();
});
addToDo.addEventListener('click', function() {
let question = prompt('Введите название дела: ', '').trim(),
toDoList = document.querySelector('.todo-block');
if(question === null || question === '') {
return false;
}
let toDoElement = `<div class="todo__element">
<h3>${question}</h3>
<input type="checkbox" class="todo__check"/>
<div class="close"></div>
</div>`;
toDoList.innerHTML = '';
toDoElements.push(toDoElement);
renderToDo();
OptionToDo();
});
function OptionToDo() {
let todo = document.querySelectorAll('.todo__element');
for(item of todo) {
item.addEventListener('click', function(e) {
if(e.target.classList.contains('close')) {
this.remove();
}
if(e.target.checked) {
this.querySelector('h3').style.color = '#11998e';
this.querySelector('h3').style.textDecoration = 'line-through';
} else {
this.querySelector('h3').style.color = '#000';
this.querySelector('h3').style.textDecoration = 'none';
}
});
}
}
function renderToDo() {
localStorage.setItem('todo', JSON.stringify(toDoElements.join('')));
document.querySelector('.todo-block').insertAdjacentHTML('beforeend', JSON.parse(localStorage.getItem('todo')));
}
Вот тут должно происходить удаление элемента:
item.addEventListener('click', function(e) {
if(e.target.classList.contains('close')) {
this.remove();
}
