1 year ago

#158434

test-img

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

Accepted video resources