Hello I'm taking an intro javascript class an one of the last assignments is to write a web application to add items to a list using a form text input and button, and allow the user to delete an item from the list by clicking on it.

The code i currently have is working, but it only deletes the last item. I need to delete the specific item being clicked.

Please help

<!doctype html>
<html lang="en">
<head>
<title> Add and delete items Objective </title>
<meta charset="utf-8">
<style>
p {
font-style: italic;
}
li:hover {
cursor: pointer;
}

</style>
<script>
/* create constructor to display the properties, in this case there's only one */
function Item(item) {
this.item = item;

/*this will print it into the page */
this.print = function(name) {
var s = "Item: " + this.item;
return s;
}
}

/* empty array where the items will be saved and displayed into the page */
var itemList = [];

window.onload = init;

function init() {
var submitButton = document.getElementById("submitButton");
submitButton.onclick = getItemData;

// add click handler for element created in javascript
var itemList = document.getElementById("itemList");
itemList.onclick = deleteItem;

}

/* form collection for the item
*/

function getItemData() {
var itemInput = document.getElementById("item");
var item = itemInput.value;


if (item == null || item == "") {
alert("Please enter an item.");
return;
}

/* if something is entered then it is pushed and saved into the itemList */
else {
var items = new Item(item);
itemList.push(items);
addItemToList(items);
}
}

/* this creates the new elements and displays them into the page once they are
saved into the itemList */
function addItemToList(items) {
var itemList = document.getElementById("itemList");
var li = document.createElement("li");
li.innerHTML = items.print();
itemList.appendChild(li);
}

/* this deletes the items from the page. however, it only removes the last item on the list */
function deleteItem() {
var oldItem = document.querySelector("li");
if (oldItem) {
var oldItemParent = oldItem.parentElement;
oldItemParent.removeChild(oldItem);
}
}
</script>
</head>
<body>
<form>
<label for="item">Add an item: </label>
<input id="item" type="text" size="20"><br>
<input id="submitButton" type="button" value="Add!">
</form>
<ul id="itemList">
</ul>
<p>
Click an item to remove it from the list.
</p>
</body>
</html>