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?

```js
(() => {

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

})()
```

```css
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;
}
```

```html
<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.