Как удалить последнего <li>ребенка вместе с его локальным хранилищем?

Question

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

Я пытался использовать element.lastChild, но удалить его не получилось.

var last = document.getElementById("list").lastChild.innerHTML;

Вот мой код

var remove = function(){
    var listItems = document.getElementById("list").getElementsByTagName("li");
    var last = listItems[listItems.length - 1];
    last.parentNode.removeChild(last);
    removeStore(last);
   }   

// localStorage
function store() {
    window.localStorage.myToDoList = list.innerHTML;
  }
function clearStore() {
    localStorage.clear();
 }
function removeStore(item) {
    localStorage.removeItem(item);
}  

Удалить работает только для удаления задач, но я получаю ошибку после первого нажатия на кнопку удаления "Ошибка типа: last.parentNode имеет значение null" и после последнего: Ошибка типа: document.getElementById (...). LastChild имеет значение null

https://codepen.io/aggat/pen/PrQRYj

Answer 1

Вы можете заменить свою часть кода javascript моей частью. Измененная часть комментируется заглавными буквами и объясняется с целью изменения.

    var add = function(){
        var listItems = document.getElementById("list").getElementsByTagName("li");
        var what = document.getElementById('what').value;
        var li = document.createElement('li');
            if (what.length > 0) {
                li.appendChild(document.createTextNode(what));

          list.appendChild(li);
                store()         
                //document.getElementById('what').placeholder = "What do I have to do?";
            } else {
                li.appendChild(document.createTextNode("Task number " + (listItems.length + 1)));
                list.appendChild(li);
                store();    

            }   
    } 

    // I HAVE TO CHANGE THE LOGIC OF THIS FUNCTION COMPLETELY
    // THIS FUNCTION TAKES VALUE FROM LOCAL STORAGE, CHECKS FOR EXISISTENCE OF
    // LAST li ELEMENT HTML AND IF FIND IT, THEN REMOVE IT FROM LOCAL STORAGE VALUE
   // AND SET NEW VALUE BACK IN LOCAL STORAGE
    function rem() {
            //var a = document.getElementById("list").lastChild.innerHTML; 
            //localStorage.last = a;
            var aValue = localStorage.getItem("myToDoList");
        console.log(aValue);
            var listItems = document.getElementById("list").getElementsByTagName("li");
        console.log(listItems);
            if (listItems.length > 0) {
                var last = listItems[listItems.length - 1];
                if (last) {
                    var lastHtml = last.outerHTML;
            console.log(lastHtml);
                    var indexAtWhichLastElementPresent = aValue.indexOf(lastHtml);
                    if (indexAtWhichLastElementPresent > -1) {
                        // Removes the lastElementHtml part from local storage value
                        aValue = aValue.substring(0, indexAtWhichLastElementPresent) + aValue.substring(indexAtWhichLastElementPresent + lastHtml.length);
                    }

                }
            }
            localStorage.setItem("myToDoList", aValue);
        } 

    var remove = function(){
        var listItems = document.getElementById("list").getElementsByTagName("li");
      console.log(listItems);
        var last = listItems[listItems.length - 1];
      rem(); // CHANGED THE CALLING ORDER. FIRST REMOVE DATA FROM LOCAL STORAGE AND THEN ELEMENT WILL BE REMOVED 
      last.parentNode.removeChild(last);

    // TAKE OUT THE REMOVE FUNCTION FROM INSIDE OF THIS FUNCTION SO THAT IT CAN
    // BE USED BY SOME OTHER FUNCTION IN FUTURE

        if (listItems.length === 0){
            alert();
        }
    } 

    var clearAll = function(){
        var myNode = document.getElementById("list");
        while (myNode.firstChild) {
            myNode.removeChild(myNode.firstChild);
            clearStore();
        }
        alert();
    }

    // localStorage

    function store() {
        window.localStorage.myToDoList = list.innerHTML;
      }
    function clearStore() {
        localStorage.clear();
     }
    /*function removeStore(item) {
        localStorage.removeItem(item);
    }*/
    function getValues() {
        var storedValues = window.localStorage.myToDoList;
        if(!storedValues) {
          list.innerHTML = '';
        }
        else {
          list.innerHTML = storedValues;
          }
      }
    getValues();

     //modal box
    var modal = document.getElementById("myModal");

    //button that opens the modal
    var btn = document.getElementById("myBtn");

    //<span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    //open the modal
    function alert() {
      modal.style.display = "block";
    }

    //clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    //clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

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

Answer 2

Ваш last доступен только если у вас есть записи в вашем списке задач. Первоначально и после удаления всех элементов из списка задач, last в вашей функции remove() будет undefined, поскольку ваш список пуст.

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

var remove = function(){
    var listItems = document.getElementById("list").getElementsByTagName("li");
    var last = listItems[listItems.length - 1];
    if (last) {
       last.parentNode.removeChild(last);
    }
    ... rest of your code
}

И после удаления элемента из вашего списка установите в вашем локальном хранилище текущие элементы вашего списка. Это обновит ваше локальное хранилище с текущими предметами в списке.

if (last) {
  last.parentNode.removeChild(last);
  window.localStorage.myToDoList = document.getElementById("list").innerHTML; // or call your store(); function
}

Надеюсь, это полезно:)