1 year ago
#158434
stayleess
I want to remove item(s) from local storage
I am trying to remove items from my local storage. I m pretty new at this, and I m confused about what to do. Tried different things but nothing worked. So this is my HTML: Inside ul, I am creating a ToDo list. My JS file creates elements inside UL. After each input, the item is saved to local storage. I have two problems: My items are not adding up to my To-DO list, and can not delete items from local storage after I press the delete button on the span.
<div id="myDiv" class="header">
<h2>My To Do List</h2>
<input type="text" name="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUl"></ul>
<script>
var myNodelist = document.getElementsByTagName("Li");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.addEventListener("click", removeFromLocalStorage);
span.appendChild(txt);
myNodelist[i].appendChild(span);
console.log(span);
}
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
};
}
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("checked");
}
},
false
);
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === "") {
alert("You must write something");
} else document.getElementById("myUl").appendChild(li);
inputValue.value = "";
saveToLocalStorage();
var span = document.createElement("span");
span.classList = "close";
var text = document.createTextNode("\u00D7");
span.appendChild(text);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
removeItem();
};
}
}
function saveToLocalStorage() {
var inputValue = document.getElementById("myInput").value;
window.localStorage.setItem("myInput", JSON.stringify(inputValue));
}
Not sure even what I suppose to do. If any explanation about my code would be appreciated.
javascript
dom-events
nodelist
0 Answers
Your Answer