允許用戶重置列表...但也允許它們恢復已刪除的列表？

Question

我目前正在做一個Todo的練習名單，並想知道是否有辦法恢復列表。我正在考慮創建列表的副本，然後在用戶點擊恢復「恢復列表」按鈕時將內容重新添加到DOM，但我無法弄清楚！

這是我當前的代碼，當我點擊'Reset List'按鈕時，按鈕出現，但它不起作用。

document.addEventListener('DOMContentLoaded',() => { 

    //Targets the unordered list element 
    const list = document.getElementById("myUL"); 
    //Targets the children of the unordered list 
    const li = list.children; 

    const resetDiv = document.getElementById('resetPanel'); 
    const resetButton = document.createElement('button'); 
    const restoreButton = document.createElement('button'); 
    restoreButton.textContent = 'Restore Items'; 
    resetButton.textContent = 'Reset List'; 
    resetDiv.appendChild(resetButton); 

    //Targets the form element. 
    const form = document.getElementById("registrar"); 

    //Function declaration (Begins process of creating list item) 
    function createListItem(text){ 
    //Creates the list item 
    const li = document.createElement('li'); 
    //Function delcaration (creates an element and returns element) 
    function createElement(elementName, property, value) { 
     const element = document.createElement(elementName); 
     element[property] = value; 
     return element; 
    } 

    //Function declaration (Adds the created element to the list) 
    function appendToLi(elementName, property, value){ 
     const element = createElement(elementName, property, value); 
     li.appendChild(element); 
     return element; 
    } 

     //Appends all children to the list item. 
     appendToLi('span', 'textContent', text); 
     appendToLi('label', 'textContent', 'Completed') 
     .appendChild(createElement('input', 'type', 'checkbox')); 
     appendToLi('button', 'textContent', 'remove'); 
     appendToLi('button', 'textContent', 'edit'); 

     /*Returns the list item and it's children to what has called the 
     createListItem function*/ 
     return li; 
    } 

    //Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 
     const listCopy = document.getElementById("myUL"); 


     //Moves through the unordered list and removes each list item. 
     while (ul.firstChild) { 
     ul.removeChild(ul.firstChild); 
     } 
    resetDiv.appendChild(restoreButton); 
    }); 

    //This button should restore the removed list items. *********************** 
    restoreButton.addEventListener('click', (e) => { 
    resetDiv.removeChild(restoreButton); 
    }); 



    //Event listener (listens for click on submit button/enter press) 
    form.addEventListener('submit', (e) => { 
     e.preventDefault(); 

     //Targets the input element. 
     const input = document.querySelector('input'); 

     //If the user has not entered any text in the input field, alerts. 
     if(input.value === '') { 
     alert('Please enter an item!'); 

     //Otherise begins the process of creating the list item. 
     } else { 

     //Holds the user text input. 
     const text = input.value; 

     /*Calls the createListItem function which will begin the process 
      through various other functions.*/ 
     const listItem = createListItem(text); 
     list.appendChild(listItem); 
     input.value = ''; 
     } 

    }); 

    //Listens for clicks on the list item's children buttons. 
    list.addEventListener('click', (e) => { 
    const button = e.target; 
    const li = e.target.parentNode; 
    const ul = li.parentNode; 

    //Click on remove button 
    if(button.textContent === 'remove'){ 
     ul.removeChild(li); 

    //Click on edit button 
    } else if (button.textContent === 'edit'){ 
     const span = li.firstElementChild; 
     const input = document.createElement('input'); 
     input.type = 'text'; 
     input.value = span.textContent; 

     //Inserts a text field in place of the previous span item (User's input) 
     li.insertBefore(input, span); 
     li.removeChild(span); 
     button.textContent = 'save'; 

    //Click on save button 
    } else if (button.textContent === 'save'){ 
     const span = document.createElement('span'); 
     const input = li.firstElementChild; 
     span.textContent = input.value; 

     //Inserts the new text over the input field. 
     li.insertBefore(span, input); 
     li.removeChild(input); 
     button.textContent = 'edit'; 
    } 

    }); 


}); 

Answer 1

看着你想做什麼ü顯然必須刪除的項目保存到緩存，但複製d整個事情不會是有效的（它會帶着幾分更多的代碼也許工作）試着將d刪除項到一個數組在d初始列表中將d位置iD列出，並將d項目放回u可以將其放回到初始位置，並且如果d id是一個可幫助定位的編號系統，則可以在之前刪除的項目後將所有d項目加1