I would like to delete an item off my todo list and my object array at the same time with jQuery

Question

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.

Answer 1

You can get the index of el using jQuery's .index() function (on the li element, which is its parent, or grandparent in my example). Then, with the value of the index, you call splice() on the array.

Here you can see it in action (I call $(el).parent().parent() because I wrapped the remove button inside a div):

let listItems = [{listname: 'Take car to get oil change'}];
printmypage();

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">
                       <div class="text">${listItems[i].listname}
                       <button onclick="trashClicked(this)">x</button>
                       </div>
                     </li>

      `);
    };
};

function trashClicked(el) {

    listItems.splice($(el).parent().parent().index(), 1);
    $(el).parent().parent().remove();
    
    printmypage();

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="item_input"/>
<button type="button" onclick="addItem()">Add</button>
<div class="list-content">
  <ul id="display_list">
  </ul>
</div>