Débutant javascript / to do list

Bonjour,

Dans le code reproduit ci-dessous, je ne comprend pas pourquoi quand je clique le bouton delete, le programme fait fonctionner alert ("Are you sure?") et ("Well done") (la deuxième alerte n'étant initialement prévue que lorsque je clique sur l'élément "li").

Merci pour l'aide que vous voudrez bien m'apporter aussi minime soit-elle.
Pour le code disponible aussi sur https://codepen.io/marc-losson/pen/eYdVBrE

html:

<html>

<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="cool.css">
</head>

<body>
<h1>TO DO NAR</h1>
<p class="first">A FAIRE!
</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>

<ul>

</ul>

<script type="text/javascript" src="shop.js"></script>

</body>

</html>

Java:

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength(){
return input.value.length;
}

function createListElement(){
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);

function crossline(){
li.classList.toggle("done");
}
li.addEventListener("click", crossline);

var btn = document.createElement("button");
btn.appendChild(document.createTextNode("delete"));
li.appendChild(btn);

function del(){
li.remove();
}

btn.addEventListener("click", del);

input.value = "";
}

function addListAfterClick(){
if (inputLength() > 0) {
createListElement();
}
}

function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keycode === "enter") {
createListElement();
}
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);