功能描述：

用户可以在输入框中输入任务，然后点击"添加任务"按钮将任务添加到列表中。用户还可以点击任务旁边的"编辑"按钮编辑任务文本，或点击"删除"按钮删除任务。

HTML和CSS代码略

JavaScript代码:

document.addEventListener('DOMContentLoaded', function () {
  const taskInput = document.getElementById('taskInput');
  const addButton = document.getElementById('addButton');
  const taskList = document.getElementById('taskList');

  addButton.addEventListener('click', addTask);

  function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText === '') {
      return; // Do not add an empty task
    }

    const taskItem = document.createElement('li');
    taskItem.innerHTML = `<span>${taskText}</span>
                          <button class="editButton">Edit</button>
                          <button class="deleteButton">Delete</button>`;
    taskList.appendChild(taskItem);
    taskInput.value = ''; // Clear the input field

    // Attach event listeners to the newly created task item buttons
    const editButton = taskItem.querySelector('.editButton');
    const deleteButton = taskItem.querySelector('.deleteButton');
    editButton.addEventListener('click', editTask);
    deleteButton.addEventListener('click', deleteTask);
  }

  function editTask(event) {
    const taskItem = event.target.parentNode;
    const taskTextSpan = taskItem.querySelector('span');
    const currentTaskText = taskTextSpan.innerText;
    const updatedTaskText = prompt('Edit task:', currentTaskText);
    if (updatedTaskText && updatedTaskText.trim() !== '') {
      taskTextSpan.innerText = updatedTaskText;
    }
  }

  function deleteTask(event) {
    const taskItem = event.target.parentNode;
    taskList.removeChild(taskItem);
  }
});

功能解释：

添加任务功能：
- 当用户在输入框中输入任务文本后，点击"添加任务"按钮触发addTask函数。
- addTask函数首先获取输入框中的文本，并使用trim方法去除文本前后的空格。
- 如果输入框中的文本为空或只包含空格，则不执行后续操作，以避免添加空任务。
- 如果输入框中有有效文本，addTask函数会创建一个新的li元素，代表一个任务项，并在该元素中添加任务文本和"Edit"、"Delete"按钮。
- 然后，它将新任务项添加到任务列表（ul元素）中，并清空输入框的内容，以便用户可以输入下一个任务。
编辑任务功能：
- 当用户点击任务旁边的"编辑"按钮时，触发editTask函数。
- editTask函数首先获取该任务项的文本内容，并使用prompt方法弹出一个对话框，允许用户编辑任务文本。
- 用户可以在对话框中编辑任务文本，并点击"确定"按钮来保存更改。
- 如果用户在对话框中点击"取消"按钮，则不会进行任何更改。
- 如果用户在对话框中输入有效的非空文本，则将新的任务文本更新到任务项中，否则任务文本保持不变。
删除任务功能：
- 当用户点击任务旁边的"删除"按钮时，触发deleteTask函数。
- deleteTask函数获取点击按钮所在的任务项，并使用removeChild方法从任务列表中删除该任务项。
- 这样，用户就可以删除他们不再需要的任务

其它事项：

使用DOMContentLoaded事件来确保在DOM完全加载后再运行JavaScript代码。通过document.getElementById来获取HTML元素，并将处理程序添加到"Add Task"按钮上。addTask函数用于将新任务添加到任务列表，并创建编辑和删除按钮的事件监听器。
该项目是一个简单的前端应用，任务列表是在浏览器内存中动态构建和维护的，刷新页面后任务列表会被重置

JavaScript实现简单增删改功能项目实例|青训营

功能描述：

HTML和CSS代码略

JavaScript代码:

功能解释：

其它事项：