我做了一个待办事项列表，当添加一个项目时，它可以被编辑和删除。如何重写函数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);
};
我会使用一个模板：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
let template = document.getElementById('newElement');
let templateContent = template.content;
document.getElementById('addNew').onclick = createElement
function createElement() {
document.body.appendChild(templateContent);
}
function handleActions(action){
console.log(action)
}<body>
<button id="addNew">Test</button>
<template id="newElement">
<button onclick="handleActions('Action 1')">Action1</button>
<button onclick="handleActions('Action 2')">Action2</button>
</template>
</body>