Блог

Главная - Вопросы по программированию - javascript удаляет элемент из массива, хранящегося в локальном хранилище

javascript удаляет элемент из массива, хранящегося в локальном хранилище

#javascript #html

Вопрос:

У меня есть поле ввода, которое добавляет задачу. когда я добавляю задачу, рядом с каждой задачей появляется кнопка «Удалить». Эти задачи хранятся в локальном хранилище в виде массива, когда я нажимаю кнопку «Удалить», я хочу удалить конкретный элемент, а не все локальное хранилище

в общем, мы используем localStorage.removeItem(key); 

 let inputTask = document.querySelector('.input');
let tasks = document.querySelector('.tasks');
let add = document.querySelector('.add');
let alls = [];

//show tasks
function show() {
    if (window.localStorage.task) {
        let storedTaskes = JSON.parse(localStorage.getItem("task"));
        storedTaskes.forEach((item) => {
            let paragraph = document.createElement('p');
            let deleteBtn = document.createElement('button');
            deleteBtn.className = "delete";
            deleteBtn.innerHTML = "Delete";
            deleteBtn.id = item;
            deleteBtn.setAttribute("onclick","deleteBtn(this)");
            console.log(deleteBtn.value);
            paragraph.innerHTML = item;
            paragraph.appendChild(deleteBtn);
            tasks.appendChild(paragraph);
        });
    }
}

// add tasks
add.onclick = function () {
    if (inputTask.value.trim() !== "") {
        alls.push(inputTask.value);
        for (let i = 0; i < alls.length; i  ) {
            window.localStorage.setItem(`task`, JSON.stringify(alls));
        }
    }
    inputTask.value = '';
    show();
}

show();

//Delete Task
function deleteBtn(ob) {
    let id = ob.id;
    let taskArray = JSON.parse(localStorage.getItem("task"));
    for(let i = 0; i < taskArray.length; i  ){
        if(taskArray[i] === id){
            localStorage.removeItem(taskArray[i]);
        }
    }
} 
 body{
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.form {
  background-color: #f0f0f0;
  padding: 20px;
  width: 500px;
  text-align: center;
  display: flex;
  align-item: center;
  justify-content: center;
  gap: 15px;
}

.input{
  border: 0;
  outline: none;
  padding: 10px 20px;
  width: 300px;
  border-radius: 5px;
}

.add,
.delete{
  border: 0;
  outline: none;
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.tasks {
  background-color: #f0f0f0;
  padding: 20px;
  width: 500px;
}

p {
  display: block;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;

} 
  <div class="container">
        <div class="form">
            <input type="text" class="input">
            <input type="submit" class="add" value="Add Task">
        </div>
        <div class="tasks"></div>
    </div>

Как я могу удалить конкретный элемент из массива в локальном хранилище и показать новый результат для пользователя

Ответ №1:

Вам нужно удалить массив и снова сохранить массив, так как именно так работает ваша другая часть

 function deleteBtn(ob) {
  let id = ob.id;
  let taskArray = JSON.parse(localStorage.getItem("task"));
  taskArray = taskArray.filter(item => item != id)
  localStorage.setItem("task", JSON.stringify(taskArray));
  show()
}

Также измениться

 for (let i = 0; i < alls.length; i  ) {
  window.localStorage.setItem(`task`, JSON.stringify(alls));
}

Для

 localStorage.setItem(`task`, JSON.stringify(alls));

Вот лучшая версия

Я использую делегирование для удаления и сохранения в локальном хранилище, не читая его снова

Я использую сгенерированный идентификатор в качестве идентификатора

Примечание. Я должен прокомментировать часть localstorage, так как это не позволяет

 let inputTask = document.querySelector('.input');
let tasks = document.querySelector('.tasks');
let add = document.querySelector('.add');
let storedTasks // = localStorage.getItem("task"); // uncomment on your server
let allTasks = storedTasks ? JSON.parse(storedTasks) : [];

function show() {
  tasks.innerHTML = allTasks
    .map(task => `<p>${task.input} <button class="delete" data-id="${task.id}">X</button></p>`)
    .join('<br/>');
}

// add tasks
add.onclick = function() {
  const input = inputTask.value.trim();
  if (input !== "") {
    const id = allTasks.length; // use the length at this time
    allTasks.push({ id:new Date().getTime(), input });
  // localStorage.setItem("task",JSON.stringify(allTasks)); // uncomment on your server    
    inputTask.value = '';
    show();
  }
};

show();

document.querySelector(".tasks").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("delete")) {
    let id = tgt.dataset.id;
    allTasks = allTasks.filter(item => item.id != id)
    tgt.closest("p").remove();
    // localStorage.setItem("task",JSON.stringify(allTasks)); // uncomment on your server
  }
}); 
 body {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.form {
  background-color: #f0f0f0;
  padding: 20px;
  width: 500px;
  text-align: center;
  display: flex;
  align-item: center;
  justify-content: center;
  gap: 15px;
}

.input {
  border: 0;
  outline: none;
  padding: 10px 20px;
  width: 300px;
  border-radius: 5px;
}

.add,
.delete {
  border: 0;
  outline: none;
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.tasks {
  background-color: #f0f0f0;
  padding: 20px;
  width: 500px;
}

p {
  display: block;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
} 
 <div class="container">
  <div class="form">
    <input type="text" class="input">
    <input type="submit" class="add" value="Add Task">
  </div>
  <div class="tasks"></div>
</div>

Комментарии:

1. большое вам спасибо. Как я могу показать новый результат без обновления страницы, потому что при добавлении или удалении появляются старые и новые, когда я обновляю новый результат, появляются нормально

2. Пустой документ. Селектор запросов(«.задачи») в шоу

3. Смотрите обновлено — вам также необходимо изменить способ сохранения задачи при добавлении

4. большое вам спасибо, есть кое-что, что я добавляю новую задачу и создаю задачу до того, как старая задача появится дважды, затем вторая, но я обновляю только новые результаты появляются без дублирования

5. Я сделал для тебя новую версию, которая работает лучше. Вы не можете выполнять одну и ту же задачу дважды с моим кодом. Если вам это нужно, нам нужно что-то изменить

Ответ №2:

 function deleteBtn({id}) {
  let taskArray = JSON.parse(localStorage.getItem("task")); // get the array

  taskArray = taskArray.filter(ob=> ob.id != id )  // remove the id 

  localStorage.setItem("task", JSON.stringify(taskArray));

  show()
}

но так как вы используете tasks.appendChild(paragraph)
вам придется изменить show функцию на

 //show tasks
function show() {
    if (window.localStorage.task) {
        let storedTaskes = JSON.parse(localStorage.getItem("task"));
        tasks.innerHTML = "" // here
        storedTaskes.forEach((item) => {
            let paragraph = document.createElement('p');
            let deleteBtn = document.createElement('button');
            deleteBtn.className = "delete";
            deleteBtn.innerHTML = "Delete";
            deleteBtn.id = item;
            deleteBtn.setAttribute("onclick","deleteBtn(this)");
            console.log(deleteBtn.value);
            paragraph.innerHTML = item;
            paragraph.appendChild(deleteBtn);
            tasks.appendChild(paragraph)
        });
    }
}

Комментарии:

1. html = paragraph не получится. Это покажет много [object HTMLElement]

2. @mplungjan отредактировал мой ответ, если вы хотите использовать свою старую функцию, сначала просто очистите html-тег задач, а затем добавьте все, что вам нужно

3. Да: Empty document.querySelector('.tasks') in show – mplungjan 57 mins ago ;)))

Метки: ,