Удаление только выбранного элемента списка из локального хранилища - Pure JS - PullRequest
Новая
       136

Удаление только выбранного элемента списка из локального хранилища - Pure JS

2 голосов
/ 03 мая 2020

Я столкнулся с небольшой проблемой здесь. Я пытаюсь создать список дел с локальным хранилищем, но единственное, что мне нужно, это добавить элемент списка в локальное хранилище и удалить все элементы из локального хранилища, но я не могу удалить один выбранный элемент из списка. Может ли кто-нибудь помочь мне понять:

1) Удаление выбранного единственного элемента из списка. 2) Поставить флажок перед текстом списка. 3) При нажатии на флажок переключить список классов «strike» и запомнить его при загрузке / обновлении страницы sh.

Вот мой код: 

<body>
    <div>
        <h1>To-do's list</h1>
        <div>
            <input type="text" id="textBox">
            <button id="enterBtn" type="button">Enter</button>

            <div>
                <uL id="ul">
                    <li class="li"><input type="checkbox" class="checkBox" name=""> Buy food for Siboo <button class="deleteBtn">Delete</button></li>
                    <li class="li"><input type="checkbox" class="checkBox" name=""> Get a new controller <button class="deleteBtn">Delete</button></li>
                </uL><br>

                <button id="deleteAllBtn"><i class="fa fa-trash"></i> Delete All Items</button>
            </div>
            <script type="text/javascript" src="script.js"></script>
        </div>
</body>

Вот CSS: 

.strike {
    text-decoration: line-through;
   }

Вот мой JS: 

var textBox = document.getElementById("textBox");
var enterBtn = document.getElementById("enterBtn");
var ul = document.querySelector("ul");
var li = document.getElementsByClassName("li");
var checkBox = document.getElementsByClassName("checkBox");
var deleteBtn = document.getElementsByClassName("deleteBtn");
var deleteAllBtn = document.getElementById("deleteAllBtn");

var itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

localStorage.setItem('items', JSON.stringify(itemsArray));
var data = JSON.parse(localStorage.getItem('items'));

// Functions *********************

// Adding New Items to List - adding list element with checkbox and delete button *********************
function addNewItemToList(text)
{   
    itemsArray.push(textBox.value);
    localStorage.setItem('items', JSON.stringify(itemsArray));
    liMaker(textBox.value);

}

function liMaker(text) {

    var newLi = document.createElement("li");
    newLi.textContent = text;
    newLi.className = "li";
    ul.appendChild(newLi);

    var createCheckBox = document.createElement("input");
    createCheckBox.type = "checkbox";
    createCheckBox.className = "checkBox";
    newLi.appendChild(createCheckBox);

    var createDeleteButton = document.createElement("button");
    var nameButtonDelete = document.createTextNode("Delete");
    createDeleteButton.appendChild(nameButtonDelete);
    createDeleteButton.className = "deleteBtn";
    newLi.appendChild(createDeleteButton);

}

data.forEach(item => {
    liMaker(item);
});


// CheckBox ELEMENT - click on checkBox to strike the list item off list*********************
function checkBoxFunction() {
    for (var i = 0; i < checkBox.length; i++) {
        checkBox[i].onclick = function () {
            this.parentNode.classList.toggle("strike");
        }}
}

// // DELETE BUTTON - click the delete button to delete the list item *********************
function deleteBtnFunction() {
    for (var i = 0; i < deleteBtn.length; i++) {
        deleteBtn[i].onclick = function () {
            this.parentNode.parentNode.removeChild(this.parentNode);

        }}
}

// DELETE ALL BUTTON - click the Delete ALl Items button to remove all items from the list *********************
function deleteAllBtnFunction()
{
    localStorage.clear();
    while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
  itemsArray = [];
}

// TEXTBOX - press enter key to add an item to list *********************
function textBoxFunction()
{
    if (event.keyCode === 13 && textBox.value.length > 0)
    {
        addNewItemToList();
        textBox.value = "";
    }
    else if (event.keyCode === 13)
    {
        alert("Please enter an item to-do!");
    }
}

// ENTER BUTTON - click the enter button to add item to list *********************
function enterBtnFunction()
{
    if (textBox.value.length > 0)
    {
        addNewItemToList();
        textBox.value = "";
    }
    else
    {
        alert("Please enter an item to-do!");
    }
}

listItemFunction();
deleteBtnFunction();

// Event Listeners *********************
textBox.addEventListener("keypress", textBoxFunction);
enterBtn.addEventListener("click", enterBtnFunction);
deleteAllBtn.addEventListener("click", deleteAllBtnFunction);
// End of Event Listeners *********************

Ответы [ 3 ]

1 голос
/ 03 мая 2020

localStorage.removeItem(/*key*/);

0 голосов
/ 04 мая 2020

Вы можете использовать эту функцию, чтобы удалить указанный элемент c и снова сохранить элементы в localalstorage: 

function removeItem(text) {
    var items = JSON.parse(localStorage.getItem("items"));
    items = items.filter(function(e) {return e !== text; });
    localStorage.setItem("items", JSON.stringify(items));
}

removeItem("itemname");
0 голосов
/ 03 мая 2020

Я не профессионал, но недавно я создал подобное приложение. Я разобрался после добавления нового элемента, слушатели действий их не считают. Поэтому я добавил слушатели событий в функцию создания нового элемента после добавления элемента в DOM.

Вот мое предложение

Сначала необходимо связать jQuery -3.2.1. slim.min. js в ваш проект 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Поместите этот код в конец функции liMaker. 

 $('input[type="checkbox"]').click(function() {

        if ($(this).is(':checked')) {
           //Call your function
           console.log(this.id)
        }
     });

При создании элемента списка присвойте каждому из них уникальный идентификатор (добавьте его в свой чекбокс). Может быть, вы можете дать им индекс массива. 

createCheckBox.id ={unique id}

После того, как вы сделаете это, нажмите на флажок, чтобы вызвать вышеуказанную функцию. В этой функции this.id является уникальным значением, которое вы задали для флажка. Затем вы можете использовать его для удаления этого индекса из вашего массива.

Второй метод (Pure JS) Дайте общее имя класса для всех флажков и уникальный идентификатор также. 

const checkBoxes = document.querySelectorAll(".{common_class_name}")

for(const cb of checkBoxes){
        button.addEventListener('click',function(){
            let id = this.id
            /*this id is the value you gave to the checkbox.
              Call your deleting methods here*/
        })
    }

Поместите этот метод в конец вашего метода создания элемента. Это должно выполняться каждый раз, когда вы добавляете элемент.

Я скопировал ваш код, и мой метод работает нормально. Я новичок, может быть, есть лучшие способы сделать это. но мой метод работает.

Удачи

...