如何将功能待办事项列表分解为单独的部分

Question

我做了一个待办事项列表，当添加一个项目时，它可以被编辑和删除。 如何重写函数 createEditAndDeleteElement 以使其不那么麻烦或如何将其分解为几个部分。 当我试图打破它时，它显示 li 错误。 请帮忙

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);
};

Answer 1

我会使用模板： 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>

如何将功能待办事项列表分解为单独的部分

问题描述

1 个解决方案

解决方案1
0 2020-09-02 18:59:05

如何将功能待办事项列表分解为单独的部分

问题描述

1 个解决方案

解决方案1 0 2020-09-02 18:59:05

解决方案1
0 2020-09-02 18:59:05