Issue with Javascript function clearList

RianneJ :

I have created a list with HTML, CSS and Javascript which you can see below.

It's working fine up to the point where I press Clear and the list clears, and the clear button also disappears.

I am still learning Javascript and am not sure what it is that is wrong in my code. Could someone please help with what line of code I need to add/remove to stop this error from occurring?

(() => {

  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">
    <button id="clearBtn">Clear</button>
  </ol>
</div>

Thanks.

Sunil Lama :

The issue is because you are keeping the clear button within the ol and deleting the children of the list when you press clear, move it outside of ol and it will work like below:

(() => {

  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>