如何用原生JavaScript创建带类、编号、删除按钮及输入内容的todo div

CSS 部分 #

* {
  margin: 0;
  padding: 0;
}
#todos {
  min-height: 300px;
  max-width: 500px;
  border: 1px solid;
}
.todo {
  border: 2px solid #EAEAEA;
  max-width: 400px;
  padding: 1em;
  margin: 1em;
  border-radius: 3px;
  position: relative;
}
.deleteTodo {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ff4444;
  cursor: pointer;
}
.todoNumber {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}
.todoHeader {
  font-size: 20px;
  margin-bottom: 8px;
}
.todoDescription {
  color: #333;
}

HTML 部分 #

<label>Todo Header:</label>
<input type="text" id="header">
<br>
<label>Todo Paragraph:</label>
<input type="text" id="paragraph">
<br>
<input type="submit" value="Create Todo!" onclick="addTodo();">
<br><br>
<div id="todos"></div>

JavaScript 部分 #

// 全局计数器，记录待办项序号
let todoCount = 1;

function addTodo() {
  const headerInput = document.getElementById("header");
  const paraInput = document.getElementById("paragraph");
  const todoHeader = headerInput.value.trim();
  const todoParagraph = paraInput.value.trim();
  
  // 非空校验，避免生成空待办
  if (!todoHeader || !todoParagraph) {
    alert("请填写完整的待办标题和描述");
    return;
  }

  // 创建todo容器
  const todo = document.createElement("div");
  todo.className = "todo";
  
  // 拼接符合要求的内部结构
  todo.innerHTML = `
    <div class="deleteTodo">x delete todo</div>
    <p class="todoNumber">${todoCount}</p>
    <h1 class="todoHeader">${todoHeader}</h1>
    <p class="todoDescription">${todoParagraph}</p>
  `;

  // 绑定删除按钮事件
  todo.querySelector('.deleteTodo').addEventListener('click', function() {
    todo.remove();
  });

  // 插入到容器中
  document.getElementById("todos").appendChild(todo);

  // 序号自增，清空输入框
  todoCount++;
  headerInput.value = '';
  paraInput.value = '';
}

核心调整说明 #

• 新增全局计数器todoCount，初始值为1，每成功创建一个待办项后自动+1，实现序号按新增顺序递增
• 修改todo元素的内部结构，完全匹配要求的类名和标签结构，动态插入从输入框获取的标题和描述
• 给每个todo的删除按钮绑定点击事件，触发时直接移除当前todo元素
• 增加输入非空校验，避免生成无效待办，创建完成后自动清空输入框优化使用体验

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