Javascript 我想使用jQuery同时从待办事项列表和对象数组中删除一项

我将代码设置为可以删除HTML方面的项目，但在添加新项目后，旧项目会出现，因为它没有从我创建的数组中删除。我想删除与我删除的列表项关联的数组项

HTML

开车换油

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();


};

让listItems=[]；
函数addItem（）{
让输入=$（“#项_输入”）.val（）；
设tempobj={}；
tempobj.listname=输入；
listItems.push（tempobj）；
$（'项目输入'）.val（''）；
printmypage（）；
};
函数printmypage（）{
$（“#显示列表”）.html（“”）；
对于（变量i=0；i
${listItems[i].listname}

`);
};
};
函数垃圾箱（el）{
console.log（列表项[1]）；
控制台日志（el）；
$（el）.parent（）.remove（）；
};

---

我希望在单击函数trashClicked（）中的垃圾箱svg图标时删除listItems数组中的该项。因此，当我添加下一项时，它在我的数组中没有。

您可以使用jQuery的

.index（）

函数（在li元素上，在我的示例中，li元素是它的父元素或祖父母）获取

el

的索引。然后，使用索引的值调用数组

在这里，您可以看到它的作用（我调用$（el.parent（）.parent（），因为我将remove按钮包装在一个div中）：

let listItems=[{listname:'开车换油'}]；
printmypage（）；
函数addItem（）{
让输入=$（“#项_输入”）.val（）；
设tempobj={}；
tempobj.listname=输入；
listItems.push（tempobj）；
$（'项目输入'）.val（''）；
printmypage（）；
};
函数printmypage（）{
$（“#显示列表”）.html（“”）；
对于（变量i=0；i
${listItems[i].listname}
x

`);
};
};
函数垃圾箱（el）{
拼接（$（el）.parent（）.parent（）.index（），1）；
$（el）.parent（）.parent（）.remove（）；
printmypage（）；
};

添加


谢谢！这正是我想要做的。
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();


};