Javascript 如何将函数待办事项列表分解为单独的部分

我做了一个待办事项列表，当添加一个项目时，它可以被编辑和删除。如何重写createEditAndDeleteElement函数以减少麻烦，或者如何将其分解为几个部分。当我试图打破它，它显示了一个错误与李。求求你，救命

const input = document.getElementById('list');
const btnAdd = document.querySelector('.btn-add');
const toDoList = document.querySelector('.todo-list');

btnAdd.addEventListener('click', () => {
    if(input.value === '') {
        return
    }
    createEditAndDeleteElement(input.value) 
    input.value ='';
});

function createEditAndDeleteElement(value) {
    const li = document.createElement('li');
    const btnDelete = document.createElement('button');
    const btnEdit = document.createElement('button');
    li.className = 'todo-list-item';
    li.textContent = value;
    btnDelete.className = 'btn-delete';
    btnDelete.textContent = 'delete';
    btnEdit.className = 'btn-edit';
    btnEdit.textContent = 'edit';
    li.appendChild(btnDelete);
    li.appendChild(btnEdit);

    btnDelete.addEventListener('click', () => {
        toDoList.removeChild(li);
    });

    btnEdit.addEventListener('click', () => {
    const editInput = document.createElement('input');
    const saveEdit= document.createElement('button');
    saveEdit.className = 'btn-save';
    saveEdit.textContent = 'Save';
    toDoList.removeChild(li);  
    toDoList.appendChild(editInput);
    toDoList.appendChild(saveEdit);
    editInput.value = li.textContent;
    saveEdit.addEventListener('click', () => {
        toDoList.removeChild(editInput);
        toDoList.removeChild(saveEdit);
        createEditAndDeleteElement(editInput.value)
    })
    });
    
    toDoList.appendChild(li);
};

我会使用一个模板：

let template=document.getElementById（'newElement'）；
让templateContent=template.content；
document.getElementById（'addNew'）。onclick=createElement
函数createElement（）{
document.body.appendChild（templateContent）；
}
函数handleActions（操作）{
console.log（操作）
}

试验
行动1
行动2