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 之外，它将像下面这样工作：

(() => {

  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();

    }

  });

})()

ol{

  padding: 1em 0;

  margin: 0;

}

li button {

  opacity: 0.05;

  transition: 0.4s;

  background: none;

  border: none;

}

li:hover button {

  opacity: 0.4;

}

li button:hover {

  opacity: 1;

}

button, input {

  font-size: inherit;

}

input {

  padding-left: 1em;

  flex: 1;

  min-width: 5em;

}

#clearBtn{

  width: 100%;

}

li button {

  opacity: 0.05;

  transition: 0.4s;

  background: none;

  border: none;

}

li:hover button {

  opacity: 0.4;

}

li button:hover {

  opacity: 1;

}

button, input {

  font-size: inherit;

}

input {

  padding-left: 1em;

  flex: 1;

  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">

  <h2>Destination Wish List</h2>

  <input placeholder="New Destination" id="newItem">

  <button id="addBtn">Add</button>

  <button id="clearBtn">Clear</button>

  <ol id="wishlist">

  </ol>