Javascript 函数clearList 的问题

Question

我创建了一个包含 HTML、CSS 和 Javascript 的列表，您可以在下面看到。

它工作正常，直到我按“清除”并且列表被清除，并且清除按钮也消失了。

我仍在学习 Javascript，不确定我的代码中有什么问题。有人可以帮忙我需要添加/删除哪一行代码来阻止此错误的发生吗？

(() => {

  const listElement = document.getElementById('wishlist');

  const newItem = document.getElementById('newItem');

  const addBtn = document.getElementById('addBtn');

  const clearBtn = document.getElementById('clearBtn');

  //add new destination to the list

  function addItem(item) {

    const itemElement = document.createElement('li');

    itemElement.textContent = item;

    const deleteButton = document.createElement('button');

    deleteButton.textContent = 'x';

    itemElement.appendChild(deleteButton);

    deleteButton.addEventListener('click', ev => { // <- new

      listElement.removeChild(itemElement); // <- new

    }); // <- new

    listElement.appendChild(itemElement);

  };

  function clearList() {

    while (listElement.firstChild) {

      listElement.removeChild(listElement.firstChild);

    }

  }

  function renderList(list) {

    list.forEach(addItem);

  }

  addBtn.addEventListener('click', ev => {

    newItem.value.split(',').forEach(v => {

      if (v) {

        addItem(v);

      }

    });

    newItem.value = null;

  });

  clearBtn.addEventListener('click', ev => {

    clearList();

  });

  window.addEventListener('beforeunload', ev => {

    const items = [...listElement.childNodes];

    if (items.length) {

      const list = items.map(item => {

        return item.textContent.slice(0, -1);

      });

      localStorage.setItem('destination-list', list);

    } else {

      localStorage.removeItem('destination-list');

    }

  });

  window.addEventListener('DOMContentLoaded', ev => {

    const shoppingList = localStorage.getItem('destination-list');

    if (destinationList) {

      renderList(destinationList.split(','));

    }

  });

  newItem.addEventListener("keyup", ev => {

    if (ev.key === "Enter") {

      addBtn.click();

    }

  });

})()

Answer 1

问题是因为您将清除按钮保留在 ol 内，并在按下清除时删除列表的子项，将其移到 ol 之外，它将像下面这样工作：(() => {&nbsp; const listElement = document.getElementById('wishlist');&nbsp; const newItem = document.getElementById('newItem');&nbsp; const addBtn = document.getElementById('addBtn');&nbsp; const clearBtn = document.getElementById('clearBtn');//add new destination to the list&nbsp; function addItem(item) {&nbsp; &nbsp; const itemElement = document.createElement('li');&nbsp; &nbsp; itemElement.textContent = item;&nbsp; &nbsp; const deleteButton = document.createElement('button');&nbsp; &nbsp; deleteButton.textContent = 'x';&nbsp; &nbsp; itemElement.appendChild(deleteButton);&nbsp; &nbsp; deleteButton.addEventListener('click', ev => { // <- new&nbsp; &nbsp; &nbsp; listElement.removeChild(itemElement); // <- new&nbsp; &nbsp; }); // <- new&nbsp; &nbsp; listElement.appendChild(itemElement);&nbsp; };&nbsp; function clearList() {&nbsp; &nbsp; while (listElement.firstChild) {&nbsp; &nbsp; &nbsp; listElement.removeChild(listElement.firstChild);&nbsp; &nbsp; }&nbsp; }&nbsp; function renderList(list) {&nbsp; &nbsp; list.forEach(addItem);&nbsp; }&nbsp; addBtn.addEventListener('click', ev => {&nbsp; &nbsp; newItem.value.split(',').forEach(v => {&nbsp; &nbsp; &nbsp; if (v) {&nbsp; &nbsp; &nbsp; &nbsp; addItem(v);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; newItem.value = null;&nbsp; });&nbsp; clearBtn.addEventListener('click', ev => {&nbsp; &nbsp; clearList();&nbsp; });&nbsp; window.addEventListener('beforeunload', ev => {&nbsp; &nbsp; const items = [...listElement.childNodes];&nbsp; &nbsp; if (items.length) {&nbsp; &nbsp; &nbsp; const list = items.map(item => {&nbsp; &nbsp; &nbsp; &nbsp; return item.textContent.slice(0, -1);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; localStorage.setItem('destination-list', list);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; localStorage.removeItem('destination-list');&nbsp; &nbsp; }&nbsp; });&nbsp; window.addEventListener('DOMContentLoaded', ev => {&nbsp; &nbsp; const shoppingList = localStorage.getItem('destination-list');&nbsp; &nbsp; if (destinationList) {&nbsp; &nbsp; &nbsp; renderList(destinationList.split(','));&nbsp; &nbsp; }&nbsp; });&nbsp; newItem.addEventListener("keyup", ev => {&nbsp; &nbsp; if (ev.key === "Enter") {&nbsp; &nbsp; &nbsp; addBtn.click();&nbsp; &nbsp; }&nbsp; });})()ol{&nbsp; padding: 1em 0;&nbsp; margin: 0;}li button {&nbsp; opacity: 0.05;&nbsp; transition: 0.4s;&nbsp; background: none;&nbsp; border: none;}li:hover button {&nbsp; opacity: 0.4;}li button:hover {&nbsp; opacity: 1;}button, input {&nbsp; font-size: inherit;}input {&nbsp; padding-left: 1em;&nbsp; flex: 1;&nbsp; min-width: 5em;}#clearBtn{&nbsp; width: 100%;}li button {&nbsp; opacity: 0.05;&nbsp; transition: 0.4s;&nbsp; background: none;&nbsp; border: none;}li:hover button {&nbsp; opacity: 0.4;}li button:hover {&nbsp; opacity: 1;}button, input {&nbsp; font-size: inherit;}input {&nbsp; padding-left: 1em;&nbsp; flex: 1;&nbsp; min-width: 5em;}<div class="destination-list"><h2>Destination Wish List</h2><input placeholder="New Destination" id="newItem"><button id="addBtn">Add</button><ol id="wishlist"></ol><button id="clearBtn">Clear</button>

Answer 2

<div class="destination-list">&nbsp; <h2>Destination Wish List</h2>&nbsp; <input placeholder="New Destination" id="newItem">&nbsp; <button id="addBtn">Add</button>&nbsp; <button id="clearBtn">Clear</button>&nbsp; <ol id="wishlist">&nbsp; </ol>