现象

一个表单中，有个列表字段，可增删改元素个数。其中，删除按钮使用了 button 元素。

在表单输入框输入回车时，发现莫名其妙会删除一个元素，检查并无其他删除元素逻辑，通过调试发现，触发了以上列表字段的删除了。

原因

查看 MDN 文档： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

button 的类型 type 属性，默认值是 submit，含义为：此按钮将表单数据提交给服务器。

所以，在表单内输入框按下回车时，会触发浏览器的默认行为：触发按钮的点击事件。

而如果这个按钮的作用不是提交，而是删除某个字段的元素之类的功能，就会触发问题。

解决方法

方法1，给 button 加上 type 属性：

此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。

<button type="button"></button>

方法2，使用 div 或 span 元素模拟按钮效果，div 和 span 元素不会有默认行为。