Add/RemoveListItems

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add/Remove List Elements</title>
</head>
<body>
<h1>List of items</h1>
<ul id="items"></ul>
<input type="text" id="newText" />
<input type="button" value="Add" onclick="addItem()">

<script>
    function addItem() {
        let collection = document.getElementById('items');
        let newItem = document.getElementById('newText').value;
        let newLi = document.createElement('li');
        let deleteLink = document.createElement('a');
        deleteLink.textContent = '[Delete]';
        deleteLink.href = '#';
        newLi.textContent = newItem + ' ';
        newLi.appendChild(deleteLink);
        collection.appendChild(newLi);
        document.getElementById('newText').value = '';
        collection.addEventListener('click', deleteItem);

        function deleteItem() {
            collection.removeChild(newLi);
        }
    }
</script>
</body>
</html>