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>