如何为createElement生成的元素制作删除按钮？原生JS待办列表开发问题

• 元素挂载层级错误：你现在把待办文本容器TodoDiv、编辑按钮、删除按钮三个独立元素直接插到了列表TodoList下，删除按钮的父元素是整个待办列表，点击删除时自然会把整个列表删掉
• 点击目标判断漏判：如果点到了删除按钮内部的<i>图标，event.target就是i标签，不会匹配trashbtn类，判断逻辑就不会触发
• HTML结构不符合规范：ul的直接子元素只能是li，你直接把按钮插在ul下既不符合语义，也加剧了层级混乱

调整后的JS代码 #

//selectors!
const todoBtn = document.querySelector('.todo-button');
const TodoList = document.querySelector('.todo-list');
const todoInput = document.querySelector('.todo-input');

// event Listeners
todoBtn.addEventListener('click', Testgo);
TodoList.addEventListener('click', Testing);

//Functions!
function Testgo(event) {
  event.preventDefault();
  // 待办项根容器
  const TodoDiv = document.createElement('div');
  TodoDiv.classList.add('todoDiv');

  // 待办文本
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('newTodo');
  TodoDiv.appendChild(newTodo);

  // 编辑按钮
  const TodoBtn = document.createElement('button');
  TodoBtn.classList.add('newbtn');
  TodoBtn.innerHTML = "<i class='fas fa-check'></i>";
  // 把按钮插到待办项容器里，不是直接插列表
  TodoDiv.appendChild(TodoBtn);

  // 删除按钮
  const TrashBtn = document.createElement('button');
  TrashBtn.classList.add('trashbtn');
  TrashBtn.innerHTML = "<i class='fas fa-trash'></i>";
  // 把按钮插到待办项容器里
  TodoDiv.appendChild(TrashBtn);

  // 只把整个待办项容器插到列表
  TodoList.appendChild(TodoDiv);

  todoInput.value = '';
}

function Testing(event) {
  const item = event.target;
  // 兼容点击图标场景，往上找最近的删除按钮
  const trashBtn = item.closest('.trashbtn');
  if (trashBtn) {
    // 找到待办项根容器直接删除
    const todoItem = trashBtn.closest('.todoDiv');
    todoItem.remove();
  }
}

调整后的HTML代码（修正类名多余的点，移除原有示例按钮避免干扰） #

<header>
  <h1>ToDo</h1>
</header>

<form>
  <input type="text" placeholder="Add" class="todo-input" />
  <button id="button" class="todo-button" type="submit"><i class="fas fa-plus-square"></i></button>
</form>

<div class="test1">
  <p>hi</p>
</div>
<div class="test2">
  <p>ho</p>
</div>

<div class="todo-container">
  <ul class="todo-list">
  </ul>
</div>

内容的提问来源于stack exchange，提问作者dev71515