I have my code set up to be able to delete an item on the HTML side of things but after I add a new item the old item appears due to it not being deleted from my array I made. I would like to delete the array item associated with the list item I deleted.
HTML
<div class="list-content">
<ul id="display_list">
<li class="item">
<img src="./img/icons/checked.svg">
<p class="text">Take car to get oil change</p>
<img id="trash" src="./img/icons/trash.svg"
onclick="trashClicked(this)">
</li>
</ul>
</div>
Javascript
let listItems = [];
function addItem() {
let input = $('#item_input').val();
let tempobj = {};
tempobj.listname = input;
listItems.push(tempobj);
$('#item_input').val('');
printmypage();
};
function printmypage() {
$('#display_list').html('');
for(var i = 0; i < listItems.length; i ++) {
$('#display_list').append(`
<li class="item">
<img src=${unchecked}>
<p class="text">${listItems[i].listname}</p>
<img id="trash" src="./img/icons/trash.svg"
onclick="trashClicked(this)">
</li>
`);
};
};
function trashClicked(el) {
console.log(listItems[1]);
console.log(el);
$(el).parent().remove();
};
I would like it when I click my trash svg icon in the function trashClicked() to delete that item in my listItems array. So when I go to add the next item it doesn't have it in my array.