当页面中动态生成的删除按钮未显式设置 `type="button"` 时，其默认类型为 `submit`，会触发表单提交或冒泡至父表单，导致回车键意外触发删除行为；解决方法是为按钮明确声明 `type="button"`。

在 Web 表单开发中，尤其是处理动态增删字段（如多组输入框）时，一个常见但容易被忽视的问题是：点击“删除”按钮可正常移除对应行，但当用户在输入框中编辑内容并按 Enter 键时，该行也被意外删除。根本原因在于 HTML 中 <button> 元素的默认 type 属性值为 "submit" —— 即使按钮不在 <form> 标签内，只要其位于表单上下文（例如嵌套在 <form> 中，或浏览器兼容性行为影响），按下 Enter 就可能触发其点击事件，进而执行绑定的删除逻辑。

你的当前 JS 代码：

$("body").on("click", ".remove_node_btn_frm_field", function () {
  $(this).closest(".form_field_outer_row").remove();
});

完全正确，问题不出在 JavaScript，而出在 HTML 按钮语义层面。

✅ 正确写法（务必显式声明 type="button"）：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

立即学习“Java免费学习笔记（深入）”；

<!-- ✅ 安全：不会响应 Enter 键 -->
<button type="button" class="remove_node_btn_frm_field">删除</button>

❌ 错误写法（隐式 type="submit"，存在风险）：

<!-- ❌ 危险：Enter 键可能触发点击 -->
<button class="remove_node_btn_frm_field">删除</button>

⚠️ 补充注意事项：

• 即使按钮未包裹在 <form> 内，某些浏览器（尤其旧版）仍可能因事件冒泡或 DOM 结构关联误判为表单控件；
• 若该按钮确实位于 <form> 中且你不希望任何 Enter 提交行为，除了设 type="button"，还可为表单添加 onsubmit="return false;" 或 JS 阻止默认提交（但非必需，type="button" 已足够）；
• 动态生成的按钮（如通过 JS 拼接字符串或模板引擎渲染），务必在生成时就写入 type="button"，避免依赖后续 JS 修正。

? 总结：这不是 JavaScript 事件监听逻辑的问题，而是 HTML 按钮语义规范的实践问题。始终为非提交用途的按钮显式设置 type="button"，是防御性前端开发的重要习惯，能彻底杜绝 Enter 键误触发删除、保存等副作用操作。