Я пытаюсь удалить элемент из локального хранилища. Это работает, за исключением того, что иногда удаляет более одного элемента.
Я пробовал array.splice удалить локальное хранилище, а затем сбросить его с новыми значениями и не нашел способа это исправить, я уверен, что это что-то простое.
let itemsArray = JSON.parse(localStorage.getItem("itemsArray")) || [];
//Initialize Function
window.addEventListener("load", () => showItems(itemsArray));
//Add event listener for the form submit
myForm.addEventListener("submit", onSubmit);
//Add event listener for the click event on the delete button
itemList.addEventListener("click", removeItem);
function showItems(itemsArray) {
itemList.innerHTML = itemsArray.join("");
}
//Place the input into to list of items
function onSubmit(e) {
//Prevent the form submission
e.preventDefault();
//Create li element for the DOM
li = document.createElement("li");
//Place input value into li
li.appendChild(document.createTextNode(`${item.value}`));
//Create the delete button and place it to the right of input value
const btnDelete = document.createElement("button");
btnDelete.classList.add("btnDelete");
btnDelete.appendChild(document.createTextNode("X"));
li.appendChild(btnDelete);
itemList.appendChild(li);
itemsArray.push(li.outerHTML);
localStorage.setItem("itemsArray", JSON.stringify(itemsArray));
//Reset input value to empty
item.value = "";
}
//Delete item
function removeItem(e) {
if (e.target.classList.contains("btnDelete")) {
if (confirm("Are You Sure You Want To Delete This Item?")) {
removeLocalStorage();
let li = e.target.parentElement;
itemList.removeChild(li);
}
}
}
function removeLocalStorage(){
let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
for(let i = 0; i < store.length; i++){
store.splice(i, 1);
localStorage.setItem('itemsArray', JSON.stringify(store));
}
}
Все, что я хочу, это удалить элемент, который соответствует элементу, удаляемому из пользовательского интерфейса. Когда я удаляю, скажем, индекс 1, он удаляет все остальные индексы.
По сути, это проект Брэда Трэверси по манипулированию DOM. Я пытаюсь больше работать с локальным хранилищем для других проектов.
Как элементы пользовательского интерфейса связаны с элементами массива?
Пожалуйста, добавьте функцию showItems. Также см.: stackoverflow.com/help/минимально-воспроизводимый-пример



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы пробовали линию?:
window.localStorage.removeItem('itemsArray');
Эта строка удалит только элемент с определенным ключом в локальном хранилище.
Я думаю, он просто хочет удалить один элемент из хранящегося там массива, а не весь массив.
Я попробовал это, в основном это сработало, но когда я обновил страницу, элементы вернулись в локальное хранилище. Возможно, возникла проблема с получением локального хранилища при загрузке страницы.
Вам нужно передать индекс элемента, который вы хотите удалить, в функцию removeLocalStorage. См. код ниже:
//Delete item
function removeItem(e) {
if (e.target.classList.contains("btnDelete")) {
if (confirm("Are You Sure You Want To Delete This Item?")) {
let li = e.target.parentElement;
let index = Array.prototype.indexOf.call(itemList.children, li);
removeLocalStorage(index);
itemList.removeChild(li);
}
}
}
function removeLocalStorage(index){
let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
store.splice(index, 1);
localStorage.setItem('itemsArray', JSON.stringify(store));
}
Да, это помогло. Я подумал, что это что-то простое, чего мне не хватало. Большое спасибо!
Рад, что смог помочь. Если проблема полностью решена, не могли бы вы отметить ответ как принятый? Спасибо.
Мне кажется, что циклом вы удаляете весь массив. Вы должны передать идентификатор в removeFromLocalStorage(). Там вы должны знать, какой элемент вы хотите удалить. Цикл имеет смысл для меня только в том случае, если вы хотите обнаружить индекс определенного элемента с некоторым свойством. Например:
...
if (
confirm("Are You Sure You Want To Delete This Item?")
) {
removeLocalStorage(e.target.id);
let li = e.target.parentElement; itemList.removeChild(li);
}
removeFromLocalStorage(identifier){
...
let id
store.forEach((el,index)=> {
id = el.identifier === identifier && index
}).
store.splice(id,1)
localStorage.setItem('itemArray', JSON.stringify(store))
....
}
Вы не говорите
removeLocalStorage, какой элемент удалить. Это просто удаление всех остальных элементов.