LocalStorage removes the wrong value

I keep having the same issue again and again : When I add a task, it gets added to the localStorage correctly. But once I have multiple tasks and I click complete on a random one, sometimes it happens that the LocalStorage removes the task before it or after it. I can't figure out a way how to let it work.

let addBtn = document.getElementById("addButton");

let textInput = document.getElementById("textInput");

let mainList =  document.getElementById("mainList");

let storage = JSON.parse(localStorage.getItem("toDos")) || ;



if (storage.length != 0){

  for (let i=0; i<storage.length;i++){

    addTask(mainList, storage[i]);

  };

};



function addTask(list,task){

	var newTask = document.createElement("li");

	newTask.textContent=task

  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";

  addCompleteBtn(newTask);

  list.appendChild(newTask);

}



function addCompleteBtn (newTask){

  let completeBtn = document.createElement("button");

  completeBtn.className="btn btn-success completeBtn";

  completeBtn.textContent="Completed";

  newTask.appendChild(completeBtn);

};



  addBtn.addEventListener("click", ()=>{

  if(textInput.value === ""){

    alert("Error: The field is either empty or you entered more than 100 characters!");

  }else{

    storage.push(textInput.value);      

    addTask(mainList, textInput.value);

    textInput.value="";

    localStorage.setItem("toDos",JSON.stringify(storage));

  };

});

    

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       storage.splice(storage.indexOf(toBeRemoved),1);

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>To-do-list App</title>

  </head>

  <body>

  <div class="jumbotron bg-info">

  <div class="container">

    <h1 class="display-4 text-center">Task List</h1>

    <p class="lead text-center">Click on the Add button to add a task</p>

  </div>

</div>

<div class="container">

  <div class="firstInput input-group mb-5">

    <div class="input-group-prepend">

      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>

    </div>

    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">

    </div>

  </div>

      <ul class='tasksList container' id="mainList">

      </ul>

    <script src="script.js"></script>

  </body>

</html>

Shows all the values in the LocalStorage

Once task 2 is removed, task 3 is removed from the Storage instead

this is the specific part that causes me issues :

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       /* This is the part of code causing me issues

       storage.splice(storage.indexOf(toBeRemoved),1);

       */

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

edited Nov 21 '18 at 9:28

asked Nov 21 '18 at 9:15

iDome89

104

please point to the specific part of code

– brk
Nov 21 '18 at 9:21

I have edited the main post commenting out the part of code that causes the issue.

– iDome89
Nov 21 '18 at 9:28

1

so if it's your storage contents that are incorrect, it actually has nothing to do with localStorage, right?

– Alnitak
Nov 21 '18 at 9:30

try doing some debugging. hit console.log(toBeRemoved)

– marvinIsSacul
Nov 21 '18 at 9:36

add a comment |

let addBtn = document.getElementById("addButton");

let textInput = document.getElementById("textInput");

let mainList =  document.getElementById("mainList");

let storage = JSON.parse(localStorage.getItem("toDos")) || ;



if (storage.length != 0){

  for (let i=0; i<storage.length;i++){

    addTask(mainList, storage[i]);

  };

};



function addTask(list,task){

	var newTask = document.createElement("li");

	newTask.textContent=task

  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";

  addCompleteBtn(newTask);

  list.appendChild(newTask);

}



function addCompleteBtn (newTask){

  let completeBtn = document.createElement("button");

  completeBtn.className="btn btn-success completeBtn";

  completeBtn.textContent="Completed";

  newTask.appendChild(completeBtn);

};



  addBtn.addEventListener("click", ()=>{

  if(textInput.value === ""){

    alert("Error: The field is either empty or you entered more than 100 characters!");

  }else{

    storage.push(textInput.value);      

    addTask(mainList, textInput.value);

    textInput.value="";

    localStorage.setItem("toDos",JSON.stringify(storage));

  };

});

    

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       storage.splice(storage.indexOf(toBeRemoved),1);

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>To-do-list App</title>

  </head>

  <body>

  <div class="jumbotron bg-info">

  <div class="container">

    <h1 class="display-4 text-center">Task List</h1>

    <p class="lead text-center">Click on the Add button to add a task</p>

  </div>

</div>

<div class="container">

  <div class="firstInput input-group mb-5">

    <div class="input-group-prepend">

      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>

    </div>

    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">

    </div>

  </div>

      <ul class='tasksList container' id="mainList">

      </ul>

    <script src="script.js"></script>

  </body>

</html>

Shows all the values in the LocalStorage

Once task 2 is removed, task 3 is removed from the Storage instead

this is the specific part that causes me issues :

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       /* This is the part of code causing me issues

       storage.splice(storage.indexOf(toBeRemoved),1);

       */

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

edited Nov 21 '18 at 9:28

asked Nov 21 '18 at 9:15

iDome89

104

please point to the specific part of code

– brk
Nov 21 '18 at 9:21

I have edited the main post commenting out the part of code that causes the issue.

– iDome89
Nov 21 '18 at 9:28

1

so if it's your storage contents that are incorrect, it actually has nothing to do with localStorage, right?

– Alnitak
Nov 21 '18 at 9:30

try doing some debugging. hit console.log(toBeRemoved)

– marvinIsSacul
Nov 21 '18 at 9:36

add a comment |

let addBtn = document.getElementById("addButton");

let textInput = document.getElementById("textInput");

let mainList =  document.getElementById("mainList");

let storage = JSON.parse(localStorage.getItem("toDos")) || ;



if (storage.length != 0){

  for (let i=0; i<storage.length;i++){

    addTask(mainList, storage[i]);

  };

};



function addTask(list,task){

	var newTask = document.createElement("li");

	newTask.textContent=task

  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";

  addCompleteBtn(newTask);

  list.appendChild(newTask);

}



function addCompleteBtn (newTask){

  let completeBtn = document.createElement("button");

  completeBtn.className="btn btn-success completeBtn";

  completeBtn.textContent="Completed";

  newTask.appendChild(completeBtn);

};



  addBtn.addEventListener("click", ()=>{

  if(textInput.value === ""){

    alert("Error: The field is either empty or you entered more than 100 characters!");

  }else{

    storage.push(textInput.value);      

    addTask(mainList, textInput.value);

    textInput.value="";

    localStorage.setItem("toDos",JSON.stringify(storage));

  };

});

    

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       storage.splice(storage.indexOf(toBeRemoved),1);

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>To-do-list App</title>

  </head>

  <body>

  <div class="jumbotron bg-info">

  <div class="container">

    <h1 class="display-4 text-center">Task List</h1>

    <p class="lead text-center">Click on the Add button to add a task</p>

  </div>

</div>

<div class="container">

  <div class="firstInput input-group mb-5">

    <div class="input-group-prepend">

      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>

    </div>

    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">

    </div>

  </div>

      <ul class='tasksList container' id="mainList">

      </ul>

    <script src="script.js"></script>

  </body>

</html>

Shows all the values in the LocalStorage

Once task 2 is removed, task 3 is removed from the Storage instead

this is the specific part that causes me issues :

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       /* This is the part of code causing me issues

       storage.splice(storage.indexOf(toBeRemoved),1);

       */

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

edited Nov 21 '18 at 9:28

asked Nov 21 '18 at 9:15

iDome89

104

let addBtn = document.getElementById("addButton");

let textInput = document.getElementById("textInput");

let mainList =  document.getElementById("mainList");

let storage = JSON.parse(localStorage.getItem("toDos")) || ;



if (storage.length != 0){

  for (let i=0; i<storage.length;i++){

    addTask(mainList, storage[i]);

  };

};



function addTask(list,task){

	var newTask = document.createElement("li");

	newTask.textContent=task

  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";

  addCompleteBtn(newTask);

  list.appendChild(newTask);

}



function addCompleteBtn (newTask){

  let completeBtn = document.createElement("button");

  completeBtn.className="btn btn-success completeBtn";

  completeBtn.textContent="Completed";

  newTask.appendChild(completeBtn);

};



  addBtn.addEventListener("click", ()=>{

  if(textInput.value === ""){

    alert("Error: The field is either empty or you entered more than 100 characters!");

  }else{

    storage.push(textInput.value);      

    addTask(mainList, textInput.value);

    textInput.value="";

    localStorage.setItem("toDos",JSON.stringify(storage));

  };

});

    

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       storage.splice(storage.indexOf(toBeRemoved),1);

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>To-do-list App</title>

  </head>

  <body>

  <div class="jumbotron bg-info">

  <div class="container">

    <h1 class="display-4 text-center">Task List</h1>

    <p class="lead text-center">Click on the Add button to add a task</p>

  </div>

</div>

<div class="container">

  <div class="firstInput input-group mb-5">

    <div class="input-group-prepend">

      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>

    </div>

    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">

    </div>

  </div>

      <ul class='tasksList container' id="mainList">

      </ul>

    <script src="script.js"></script>

  </body>

</html>

Shows all the values in the LocalStorage

Once task 2 is removed, task 3 is removed from the Storage instead

this is the specific part that causes me issues :

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       /* This is the part of code causing me issues

       storage.splice(storage.indexOf(toBeRemoved),1);

       */

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

let addBtn = document.getElementById("addButton");

let textInput = document.getElementById("textInput");

let mainList =  document.getElementById("mainList");

let storage = JSON.parse(localStorage.getItem("toDos")) || ;



if (storage.length != 0){

  for (let i=0; i<storage.length;i++){

    addTask(mainList, storage[i]);

  };

};



function addTask(list,task){

	var newTask = document.createElement("li");

	newTask.textContent=task

  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";

  addCompleteBtn(newTask);

  list.appendChild(newTask);

}



function addCompleteBtn (newTask){

  let completeBtn = document.createElement("button");

  completeBtn.className="btn btn-success completeBtn";

  completeBtn.textContent="Completed";

  newTask.appendChild(completeBtn);

};



  addBtn.addEventListener("click", ()=>{

  if(textInput.value === ""){

    alert("Error: The field is either empty or you entered more than 100 characters!");

  }else{

    storage.push(textInput.value);      

    addTask(mainList, textInput.value);

    textInput.value="";

    localStorage.setItem("toDos",JSON.stringify(storage));

  };

});

    

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       storage.splice(storage.indexOf(toBeRemoved),1);

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>To-do-list App</title>

  </head>

  <body>

  <div class="jumbotron bg-info">

  <div class="container">

    <h1 class="display-4 text-center">Task List</h1>

    <p class="lead text-center">Click on the Add button to add a task</p>

  </div>

</div>

<div class="container">

  <div class="firstInput input-group mb-5">

    <div class="input-group-prepend">

      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>

    </div>

    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">

    </div>

  </div>

      <ul class='tasksList container' id="mainList">

      </ul>

    <script src="script.js"></script>

  </body>

</html>

let addBtn = document.getElementById("addButton");

let textInput = document.getElementById("textInput");

let mainList =  document.getElementById("mainList");

let storage = JSON.parse(localStorage.getItem("toDos")) || ;



if (storage.length != 0){

  for (let i=0; i<storage.length;i++){

    addTask(mainList, storage[i]);

  };

};



function addTask(list,task){

	var newTask = document.createElement("li");

	newTask.textContent=task

  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";

  addCompleteBtn(newTask);

  list.appendChild(newTask);

}



function addCompleteBtn (newTask){

  let completeBtn = document.createElement("button");

  completeBtn.className="btn btn-success completeBtn";

  completeBtn.textContent="Completed";

  newTask.appendChild(completeBtn);

};



  addBtn.addEventListener("click", ()=>{

  if(textInput.value === ""){

    alert("Error: The field is either empty or you entered more than 100 characters!");

  }else{

    storage.push(textInput.value);      

    addTask(mainList, textInput.value);

    textInput.value="";

    localStorage.setItem("toDos",JSON.stringify(storage));

  };

});

    

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       storage.splice(storage.indexOf(toBeRemoved),1);

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>To-do-list App</title>

  </head>

  <body>

  <div class="jumbotron bg-info">

  <div class="container">

    <h1 class="display-4 text-center">Task List</h1>

    <p class="lead text-center">Click on the Add button to add a task</p>

  </div>

</div>

<div class="container">

  <div class="firstInput input-group mb-5">

    <div class="input-group-prepend">

      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>

    </div>

    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">

    </div>

  </div>

      <ul class='tasksList container' id="mainList">

      </ul>

    <script src="script.js"></script>

  </body>

</html>

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       /* This is the part of code causing me issues

       storage.splice(storage.indexOf(toBeRemoved),1);

       */

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

mainList.addEventListener("click",(evt)=>{

    if (evt.target.className==="btn btn-success completeBtn") {

       let listItem = evt.target.parentNode;

       let mainUl = listItem.parentNode;

       let toBeRemoved = listItem.textContent;

       /* This is the part of code causing me issues

       storage.splice(storage.indexOf(toBeRemoved),1);

       */

       mainUl.removeChild(listItem);

       localStorage.setItem("toDos",JSON.stringify(storage));

	};

});

javascript local-storage

edited Nov 21 '18 at 9:28

asked Nov 21 '18 at 9:15

iDome89

104

edited Nov 21 '18 at 9:28

asked Nov 21 '18 at 9:15

iDome89

104

edited Nov 21 '18 at 9:28

asked Nov 21 '18 at 9:15

iDome89

104

asked Nov 21 '18 at 9:15

iDome89

104

asked Nov 21 '18 at 9:15

iDome89

104

please point to the specific part of code

– brk
Nov 21 '18 at 9:21

I have edited the main post commenting out the part of code that causes the issue.

– iDome89
Nov 21 '18 at 9:28

1

so if it's your storage contents that are incorrect, it actually has nothing to do with localStorage, right?

– Alnitak
Nov 21 '18 at 9:30

try doing some debugging. hit console.log(toBeRemoved)

– marvinIsSacul
Nov 21 '18 at 9:36

add a comment |

please point to the specific part of code

– brk
Nov 21 '18 at 9:21

I have edited the main post commenting out the part of code that causes the issue.

– iDome89
Nov 21 '18 at 9:28

1

so if it's your storage contents that are incorrect, it actually has nothing to do with localStorage, right?

– Alnitak
Nov 21 '18 at 9:30

try doing some debugging. hit console.log(toBeRemoved)

– marvinIsSacul
Nov 21 '18 at 9:36

please point to the specific part of code

– brk
Nov 21 '18 at 9:21

I have edited the main post commenting out the part of code that causes the issue.

– iDome89
Nov 21 '18 at 9:28

so if it's your storage contents that are incorrect, it actually has nothing to do with localStorage, right?

– Alnitak
Nov 21 '18 at 9:30

try doing some debugging. hit console.log(toBeRemoved)

– marvinIsSacul
Nov 21 '18 at 9:36

add a comment |

1 Answer
1

active

oldest

votes

The problem is here let toBeRemoved = listItem.textContent;,this will return the text content of all elements inside that li. So if you add a task named 'Task 1', when you press Completed the value of toBeRemoved will be Task 1Completed since this will return the text of the button as well since your button is a child of the li.

So change let toBeRemoved = listItem.textContent; to let toBeRemoved = listItem.childNodes[0].nodeValue; and you should be fine, this will get the text of the li only.

answered Nov 21 '18 at 9:37

Cata John

1,034517

@iDome89 great:)

– Cata John
Nov 21 '18 at 9:55

1

Thank you very much for your answer it helped me so much to understand also the whole process.

– iDome89
Nov 21 '18 at 9:57

More specifically, because your indexOf was returning -1, you were always removing the last element of the array. As I suggested above, this was never about localStorage and the question title is misleading.

– Alnitak
Nov 21 '18 at 10:30

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408660%2flocalstorage-removes-the-wrong-value%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

So change let toBeRemoved = listItem.textContent; to let toBeRemoved = listItem.childNodes[0].nodeValue; and you should be fine, this will get the text of the li only.

answered Nov 21 '18 at 9:37

Cata John

1,034517

@iDome89 great:)

– Cata John
Nov 21 '18 at 9:55

1

Thank you very much for your answer it helped me so much to understand also the whole process.

– iDome89
Nov 21 '18 at 9:57

More specifically, because your indexOf was returning -1, you were always removing the last element of the array. As I suggested above, this was never about localStorage and the question title is misleading.

– Alnitak
Nov 21 '18 at 10:30

add a comment |

So change let toBeRemoved = listItem.textContent; to let toBeRemoved = listItem.childNodes[0].nodeValue; and you should be fine, this will get the text of the li only.

answered Nov 21 '18 at 9:37

Cata John

1,034517

@iDome89 great:)

– Cata John
Nov 21 '18 at 9:55

1

Thank you very much for your answer it helped me so much to understand also the whole process.

– iDome89
Nov 21 '18 at 9:57

More specifically, because your indexOf was returning -1, you were always removing the last element of the array. As I suggested above, this was never about localStorage and the question title is misleading.

– Alnitak
Nov 21 '18 at 10:30

add a comment |

So change let toBeRemoved = listItem.textContent; to let toBeRemoved = listItem.childNodes[0].nodeValue; and you should be fine, this will get the text of the li only.

answered Nov 21 '18 at 9:37

Cata John

1,034517

So change let toBeRemoved = listItem.textContent; to let toBeRemoved = listItem.childNodes[0].nodeValue; and you should be fine, this will get the text of the li only.

answered Nov 21 '18 at 9:37

Cata John

1,034517

answered Nov 21 '18 at 9:37

Cata John

1,034517

answered Nov 21 '18 at 9:37

Cata John

1,034517

answered Nov 21 '18 at 9:37

Cata John

1,034517

@iDome89 great:)

– Cata John
Nov 21 '18 at 9:55

1

Thank you very much for your answer it helped me so much to understand also the whole process.

– iDome89
Nov 21 '18 at 9:57

More specifically, because your indexOf was returning -1, you were always removing the last element of the array. As I suggested above, this was never about localStorage and the question title is misleading.

– Alnitak
Nov 21 '18 at 10:30

add a comment |

@iDome89 great:)

– Cata John
Nov 21 '18 at 9:55

1

Thank you very much for your answer it helped me so much to understand also the whole process.

– iDome89
Nov 21 '18 at 9:57

More specifically, because your indexOf was returning -1, you were always removing the last element of the array. As I suggested above, this was never about localStorage and the question title is misleading.

– Alnitak
Nov 21 '18 at 10:30

@iDome89 great:)

– Cata John
Nov 21 '18 at 9:55

Thank you very much for your answer it helped me so much to understand also the whole process.

– iDome89
Nov 21 '18 at 9:57

More specifically, because your indexOf was returning -1, you were always removing the last element of the array. As I suggested above, this was never about localStorage and the question title is misleading.

– Alnitak
Nov 21 '18 at 10:30

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk