Как удалить определённый элемент из массива при нажатии на кнопку удаления

В общем, есть у меня TODO лист. Там я в поле ввода вожу какое-то дело, оно появляется на экране с кнопками "Готово" и "Удалить".

Нужно сделать так, чтобы при нажатии на кнопку «Удалить» удалялся не только DOM-элемент li из DOM-дерева, но и объект в массиве дел. При клике на кнопку «Удалить» необходимо найти в массиве дел объект с таким же id и удалить его.

При нажатии "Удалить" у меня удаляется элемент, но именно первый. Поиск осуществляю по idOfItem каждого дела, которому я присваиваю рандомное значение с помощью функции (за этот пункт не ругайте, тут всё как надо).

Я запутался короче. Помогите, пожалуйста.
Само удаление происходит в последней функции createTodoApp в todoItem.deleteButton.addEventListener('click', function ().

function getRandomFloat(min, max) {
    return Math.round(Math.random() * (max - min) + min);    // я использовал рандомайзер, чтобы новым ДЕЛАМ применять рандомные id
}


let arrayOfNames = [];
class nameOfItem {                          // класс, для создания массива и элементов в него из ДЕЛ, которые добавляются в тудулист
    constructor(id, name, done) {
        this.name = name;
        this.done = done;
        this.idOfItem = getRandomFloat(1, 1000);
        arrayOfNames.push(['id:', this.idOfItem, 'name:', this.name, 'done:', this.done]);
        console.log(arrayOfNames);

    }
}

function createTodoItem(name) {

    let item = document.createElement('li');  // создаём элемент li, который будем помещать в список
    let buttonGroup = document.createElement('div');  // группа кнопок для их объединения
    let doneButton = document.createElement('button');  // кнопка для отметки дела, как "сделанное"
    let deleteButton = document.createElement('button'); // кнопка для удаления дела
    let done = false;
    let idOfItem = 1;


    const nameOfThisItem = new nameOfItem(idOfItem, name, done);

    item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
    item.textContent = nameOfThisItem.name;

    buttonGroup.classList.add('btn-group', 'btn-group-sm');
    doneButton.classList.add('btn', 'btn-success');
    doneButton.textContent = "Готово";
    deleteButton.classList.add('btn', 'btn-danger');
    deleteButton.textContent = 'Удалить';

    buttonGroup.append(doneButton);
    buttonGroup.append(deleteButton);
    item.append(buttonGroup);  // вкладываем группу кнопок в item (то есть в li)

    return {
        item, doneButton, deleteButton,
    }

}




function createTodoApp(container, title = 'Список дел') {

    let todoAppTitle = createAppTitle(title);
    let todoItemForm = createTodoItemForm();
    let todoList = createTodoList();

    container.append(todoAppTitle);
    container.append(todoItemForm.form);
    container.append(todoList);

    todoItemForm.form.addEventListener('submit', function (e) {
        e.preventDefault();

        if (!todoItemForm.input.value) {
            return
        }

        let todoItem = createTodoItem(todoItemForm.input.value);                  // применение ДЕЛУ состояние, как СДЕЛАННОЕ
        todoItem.doneButton.addEventListener('click', function () {
            todoItem.item.classList.toggle('list-group-item-success');
        });

        todoItem.deleteButton.addEventListener('click', function () {           // удаление ДЕЛА (+ при удалении надо удалить соответствующий элемент из массива)
            if (confirm('Вы уверены?')) {
                todoItem.item.remove();
                arrayOfNames.splice(arrayOfNames.findIndex(i => i.idOfItem == arrayOfNames.idOfItem), 1);  // тут я пытаюсь понять как мне найти id того элемента из массива, который удаляю

                console.log(arrayOfNames);
            }
        });

        todoList.append(todoItem.item);

        todoItemForm.input.value = '';
    });
}

window.createTodoApp = createTodoApp;