本文讲解如何修复动态添加的文本与删除按钮错位问题，通过语义化 html 结构、合理 css 布局及现代 javascript 最佳实践（如事件委托、类名替代 id、dom 缓存等），实现值与按钮严格水平对齐且可维护性强的列表组件。
本文讲解如何修复动态添加的文本与删除按钮错位问题，通过语义化 html 结构、合理 css 布局及现代 javascript 最佳实践（如事件委托、类名替代 id、dom 缓存等），实现值与按钮严格水平对齐且可维护性强的列表组件。
核心问题在于原始代码中使用了两个独立的块级元素（<div> 和 <code><button></button>）并先后追加到容器中，导致它们默认垂直堆叠；同时重复使用 id="Wadiw" 和 id="bt" 违反 HTML 唯一性规范，引发样式与脚本不可靠。
✅ 正确解法是：将每个“值+删除按钮”封装为一个逻辑单元（如 以下是优化后的完整实现： ? 关键改进说明： ⚠️ 注意：若用户输入含 HTML 字符（如 <div class="item-container">），内部用行内元素（如 <code><span></span>）显示文本，并通过 CSS 控制布局。这样既保证语义清晰，又天然支持水平排列。<form id="add-form">
<input id="input" type="text" placeholder="Enter text..." />
<button type="submit" id="add-button">Add</button>
<button type="button" id="submit-button">Submit</button>
</form>
<div id="container"></div>
<div id="output"></div>
.item-container {
display: flex;
align-items: center;
margin-bottom: 6px;
}
.item-container span.Wadiw {
margin-right: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
white-space: pre; /* 保留输入中的空格与换行（如需） */
}
.item-container .delete-button {
padding: 4px 10px;
background: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.item-container .delete-button:hover {
background: #c0392b;
}// 一次性获取并缓存 DOM 元素（提升性能）
const input = document.querySelector("#input");
const addForm = document.querySelector("#add-form");
const submitButton = document.querySelector("#submit-button");
const container = document.querySelector("#container");
const output = document.querySelector("#output");
// ✅ 使用事件委托处理动态删除按钮（无需为每个按钮单独绑定）
container.addEventListener("click", (e) => {
if (e.target.classList.contains("delete-button")) {
e.target.closest(".item-container").remove(); // 安全移除整个条目
}
});
// ✅ 表单提交：自动支持回车添加 + 阻止页面刷新
addForm.addEventListener("submit", (e) => {
e.preventDefault();
const value = input.value.trim();
if (!value) return;
// 创建条目容器
const itemContainer = document.createElement("div");
itemContainer.className = "item-container";
// 文本内容（用 span 替代 div，避免换行）
const description = document.createElement("span");
description.className = "Wadiw";
description.textContent = value;
// 删除按钮
const deleteButton = document.createElement("button");
deleteButton.type = "button"; // 明确非提交按钮
deleteButton.className = "delete-button";
deleteButton.textContent = "Delete";
// 组装并插入
itemContainer.append(description, deleteButton);
container.appendChild(itemContainer);
input.value = ""; // 清空输入框
input.focus(); // 保持焦点便于连续输入
});
// ✅ 提交输出：精准提取所有 .Wadiw 文本并换行拼接
submitButton.addEventListener("click", () => {
const texts = [...container.querySelectorAll(".Wadiw")].map(el => el.textContent.trim());
output.textContent = texts.join("\n");
});
.item-container { display: flex } 确保子元素（span + button）始终水平排列，无意外换行；id，改用 class；删除按钮不再直接操作父/兄弟节点，而是通过 closest() 安全定位所属条目；onclick 属性。<script></script>），应使用 textContent（当前已正确使用）而非 innerHTML，防止 XSS。如需富文本，请额外做转义处理。
