I am struggling to remove a task from local storage. I have already implemented a function to delete the task from the DOM, but I'm unsure how to specifically remove that object from local storage in order to save the changes. It seems like I need to retrieve and parse data from local storage, iterate over the keys, and delete the item that has the same "title". However, if I remove it from local storage, I face a dilemma as I cannot iterate.
<h1 class="text-center mt-5 mb-5">MY TO-DO LIST</h1>
<div class="container">
<div class="row">
<div class="col-4">
<form id="todoForm">
<div class="mb-3">
<label class="form-label">Task Title</label>
<input type="text" required name="title" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Task Description</label>
<textarea name="description" required class="form-control" placeholder="Task body" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-primary">Add Task!</button>
</form>
</div>
<div class="col-8">
<div class="row" id="taskList">
</div>
</div>
</div>
const myToDoList = {
selector: null,
form: null,
containerSelector: null,
container: null,
init (selector, container) {
if(typeof selector === "string" || selector.trim() !== "") {
this.selector = selector;
}
if(typeof container === "string" || container.trim() !== "") {
this.containerSelector = container;
}
this.getForm();
this.getHTMLElement();
},
getForm () {
let formElement = document.querySelector(this.selector);
this.form = formElement;
formElement.addEventListener("submit", event => {
event.preventDefault();
event.stopPropagation();
const data = {};
formElement.querySelectorAll("input, textarea")
.forEach((item) => {
data[item.name] = item.value;
})
const savedData = this.saveData(data);
this.renderItem(savedData);
})
},
getHTMLElement() {
const todoContainer = document.querySelector(this.containerSelector);
this.container = todoContainer;
document.addEventListener("DOMContentLoaded", event => {
event.preventDefault();
event.stopPropagation();
const tasks = JSON.parse(localStorage.getItem(this.selector));
if(!tasks) return "Error!";
tasks.map(taskItem => {
this.renderItem(taskItem);
})
})
},
saveData(data) {
let dataFromStore = localStorage.getItem(this.selector);
if(!dataFromStore) {
const array = [];
array.push(data);
localStorage.setItem(this.selector, JSON.stringify(array));
}
if(dataFromStore) {
dataFromStore = JSON.parse(dataFromStore);
dataFromStore.push(data);
localStorage.setItem(this.selector, JSON.stringify(dataFromStore));
}
return data;
},
renderItem(data) {
const title = data.title;
const description = data.description;
const wrapper = document.createElement("div");
wrapper.classList.add("col-4");
wrapper.innerHTML = `<div class="taskWrapper">
<div class="taskHeading">${title}</div>
<div class="taskDescription">${description}</div>
<button class="delBtn" data-del="delete">Delete</button>
</div>`;
this.container.appendChild(wrapper);
},
deleteTask() {
document.addEventListener('click', e => {
let targetBtn = e.target.getAttribute("data-del");
if(targetBtn === "delete") {
// Delete from DOM
let titleTsk = e.target.parentNode.firstElementChild;
e.target.parentNode.parentNode.remove();
// ============== //
let taskTitle = titleTsk.innerHTML;
let foundTask = JSON.parse(localStorage.getItem("#todoForm"));
console.log(foundTask);
}
})
}
}
myToDoList.init("#todoForm", "#taskList");
myToDoList.deleteTask();