Пишу простую todo, при удалении задания не обновляется массив и при редактировании тоже

Question

Всем привет, начал учить JavaScript и вот задание todo лист. Проблемы возникли следующего характера:

Когда я удаляю определенный элемент массива, я пытаюсь посмотреть его id, чтобы с помощью него удалить этот элемент. Показывает id -1.
При редактировании тоже самое. Не обновляется массив после редактирования. Т.е. если я изменил 1 элемент, а потом второй, то 1й элемент вернется в предыдущее состояние. И если до этого удалял задания, то при изменении возвращается назад. Следовательно, отсюда вопрос: как обновлять элементы массива после удаления и редактирования. ps сразу извиняюсь за код, только начинаю

let todo = [];
$('.input-button').show(1500);
function fillHtml() {
    //if something is written
    if ($('#input').val().length != 0) {
        todo = $('.todoList').html();
        //Add typed text in the alert container
        const htmlList = '<div class="todoList">' + $('#input').val() + `    <button class="delete">Delete</button></div>`;
        //Update 
        $('.todoList').html(htmlList + todo);
        //Clear after addition 
        $('#input').val("");
    } else
        alert("Enter some Text!");
}
//add click by button 
$(document).ready(function() {    
$('.addBtn').click(function() {
        fillHtml();
        });
    });
//add click by enter
$('#input').keypress(function(e) {
    if (e.keyCode == '13') {
      fillHtml();  
    }
});
//add delete
$(document).on('click',".delete", function(){
    let elemArr = $(this).val();
    console.log(elemArr);
    let clickId = $.inArray("elemArr", todo);
   //console.log(clickId);
    //todo.splice(clickId);
    let parent = $(this).parent('.todoList', '.delete');
    todo = parent.remove();
    //console.log(todo);
})
//add change todo
$('.todoList').on('dblclick', 'div', function(){
    let currentTask=$(this);
    let newCurrentTask = [];
    currentTask.html('<input type ="text" class="input2" id = "input2" placeholder="New task..."></input>');
    $('.todoList').on('keypress', function(e){
        if (e.keyCode == '13') {    
        if($('.input2').val().length != 0) {
            //newCurrentTask = $('.input2').html();
            const htmlList = '<div class="todoList">'+ $('.input2').val()+ '    <button class="delete">Delete</button></div>';
        $('.todoList').html(htmlList  + todo);
            //currentTask.text($('.input2').val());  
        } else alert("push task");   
        };    
});
    })

<html>
  <title>ToDo</title>  
  <body bgcolor="silver">
    <h1><p align="center">This is a ToDo project </p></h1>
    <p align="center" style="display: none;" class="input-button"> 
      <input type ="text" id="input" placeholder="Your text..." autofocus></input>
      <button class="addBtn" id="button"> Click me</button>  
    </p>
    <div align="center" id="todoList" class="todoList">
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src=todo.js></script>
  </body>    
</html>

БЛОГ НА HUSL

Пишу простую todo, при удалении задания не обновляется массив и при редактировании тоже

Ответы (0 шт):