如何删除最后一个 <li> 子节点及其本地存储？

Question

我正在做一个待办事项列表，我想添加、删除和清除任务及其本地存储。 Add 和 clear 工作，但我未能使 remove 工作。

我尝试使用 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);
}

删除仅适用于删除任务，但我在第一次单击删除按钮后收到错误消息 "TypeError: last.parentNode is null" 在最后一个之后： TypeError: document.getElementById(...).lastChild 为 null

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

Answer 1

只有当您的待办事项列表中有条目时，您的 last 才可用。最初，在清除待办事项列表中的所有项目后，remove() 函数中的 last 将是 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
}

希望这对您有所帮助:)

Answer 2

您可以用我的部分替换您的 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";
      }
    }

如果您在实施此解决方案时遇到任何问题，请发表评论。

如何删除最后一个 <li> 子节点及其本地存储？

How to remove last <li> child together with it's local storage?

javascript

local-storage

removechild