JavaScript. Удаление из DOM с отражением на массив

Есть локальный JSON вывожу его в дерево.
Так же добавляю три input-а. Вешаю обработчик на input Удалить. И он удаляет из дерева. Хотелось бы что бы он так же удалял и из массива объект. Знаю про метод splice(n,n) но не понимаю как его прикрутить. Подскажите пожалуйста. Если будет нужно, то могу показать JS. Думал так же о том чтобы создать новый массив объектов из оставшихся после удаления элементов. И присвоить его старым массивом. Но так же не достаточно опыта.
var data = JSON.parse(`{ "task": [{ "task_name": "Task # 1", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" }, { "task_name": "Task # 2", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" }, { "task_name": "Task # 3", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" } ] }`); console.log(data.task); var main_block = document.getElementById('main_task'); function showTask() { main_block.innerHTML = ''; for (var i in data.task) { main_block.innerHTML += `

${data.task[i].task_name}

${data.task[i].task_description}

---

${data.task[i].task_date}

` }; }; showTask(); function checkStatus() { var blockNow = document.getElementById('main_task'); var elementTask = document.getElementsByClassName('element_task'); for (var i = 0; i < elementTask.length; i++) { if (elementTask[i].getAttribute('data-state') == 'now') { var dataState = elementTask[i]; dataState.onclick = function(event) { var target = event.target; if (target.getAttribute('name') != 'delTask') return; deleteTask(this); }; }; }; function deleteTask(node) { blockNow.removeChild(node); rewrite(); }; // ТУТ СЕЙЧАС РАБОТАЮ ЧТО ТО ПРОБУЮ function rewrite() { var elems = blockNow.getElementsByTagName('div'); elems = Array.prototype.slice.call(elems); for (var i = 0; i < elems.length; i++) { var h3 = elems[i].getElementsByTagName('h3'); h3 = Array.prototype.slice.call(h3); for (var i = 0; i < h3.length; i++) { h3 = h3[i].innerHTML console.log(h3); } console.log(h3); } console.log(data.task); }; }; checkStatus();

Ответ

Чтобы удалить соответствующий элемент из массива - нужно как-то сопоставить элемент в DOM с элементом массива.
Самый простой случай, при создании разметки добавить элементу атрибут с индексом

И в методе удаления просто удалить элемент по этому индексу, например
var data = JSON.parse(`{ "task": [{ "task_name": "Task # 1", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" }, { "task_name": "Task # 2", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" }, { "task_name": "Task # 3", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" } ] }`); var main_block = document.getElementById('main_task'); function showTask() { main_block.innerHTML = ''; for (var i in data.task) { main_block.innerHTML += `

${data.task[i].task_name}

${data.task[i].task_description}

---

${data.task[i].task_date}

` }; }; showTask(); function checkStatus() { var blockNow = document.getElementById('main_task'); var elementTask = document.getElementsByClassName('element_task'); for (var i = 0; i < elementTask.length; i++) { if (elementTask[i].getAttribute('data-state') == 'now') { var dataState = elementTask[i]; dataState.onclick = function(event) { var target = event.target; if (target.getAttribute('name') != 'delTask') return; deleteTask(this); }; }; }; function deleteTask(node) { blockNow.removeChild(node); rewrite(node.dataset.taskIndex); }; // ТУТ СЕЙЧАС РАБОТАЮ ЧТО ТО ПРОБУЮ function rewrite(index) { data.task.splice(index, 1); console.log(data.task); }; }; checkStatus();

Но данный вариант ненадежен. Так как при удалении индексы будут сбиваться.
Вместо индекса можно использовать какое-нибудь уникальное поле, например task_name. В этом случае перед удалением нужно будет сначала найти индекс объекта, и лишь затем удалить. Либо заменить массив отфильтрованным и заново вызвать методы showTask и checkStatus
var data = JSON.parse(`{ "task": [{ "task_name": "Task # 1", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" }, { "task_name": "Task # 2", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" }, { "task_name": "Task # 3", "task_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque?", "task_date": "1993-11-22" } ] }`); var main_block = document.getElementById('main_task'); function showTask() { main_block.innerHTML = ''; for (var i in data.task) { main_block.innerHTML += `

${data.task[i].task_name}

${data.task[i].task_description}

---

${data.task[i].task_date}

` }; }; showTask(); function checkStatus() { var blockNow = document.getElementById('main_task'); var elementTask = document.getElementsByClassName('element_task'); for (var i = 0; i < elementTask.length; i++) { if (elementTask[i].getAttribute('data-state') == 'now') { var dataState = elementTask[i]; dataState.onclick = function(event) { var target = event.target; if (target.getAttribute('name') != 'delTask') return; deleteTask(this); }; }; }; function deleteTask(node) { blockNow.removeChild(node); rewrite(node.dataset.taskName); }; // ТУТ СЕЙЧАС РАБОТАЮ ЧТО ТО ПРОБУЮ function rewrite(taskName) { /* вариант со splice */ // data.task.splice(data.task.findIndex(t => t.task_name == taskName), 1); /* вариант с фильтром */ data.task = data.task.filter(t => t.task_name != taskName); showTask(); checkStatus(); console.log(data.task); }; }; checkStatus();