JS点击按钮触发Unexpected token ')'语法错误的原因及修复方法

这个报错和错放的多余括号完全无关，你全局排查括号找不到问题是很正常的——问题根源是你在内联onclick事件里调用了名为delete的函数：
delete是JavaScript的内置一元保留操作符，作用是删除对象的指定属性，语法规则要求它后面必须跟随要操作的目标表达式，不能像普通函数那样直接跟空括号调用。
当浏览器解析内联事件里的delete()代码时，识别到delete关键字后会默认等待后续的操作数，结果直接碰到了右括号)，就会抛出「Unexpected token ')'」的语法错误，看起来像是右括号多余，实际是关键字误用触发的解析异常。

• 最直接的方案：给你的自定义删除函数改名，避开JS保留关键字，比如改成deleteItem、removePet这类非关键字名称，同步修改按钮上的事件绑定即可，修改后示例：

<button onclick="removePet();">A Pet</button>

• 不推荐的兼容方案：如果暂时不想改函数名，可以显式指定调用window对象下的自定义方法，写成onclick="window.delete();"，但这种写法可读性差，后续维护很容易再次踩坑，不建议长期使用。
• 最佳实践方案：彻底放弃HTML内联事件绑定的写法，把结构和逻辑拆分，在JS脚本里通过addEventListener统一绑定事件，从根源上避免内联事件的作用域污染、关键字冲突问题，示例代码：

<button id="petDelBtn">A Pet</button>
<script>
function removePet() {
  // 这里写你的删除业务逻辑
}
document.getElementById('petDelBtn').addEventListener('click', removePet)
</script>

• 自定义变量、函数命名时主动避开JavaScript的保留关键字、未来保留字，除了delete之外，常见容易踩坑的关键字还有class、let、const、new、return、void、typeof、default等，拿不准的名称可以先确认是否为JS内置语法关键字再使用。
• 尽量不要在HTML标签上写内联onxxx事件，统一在JS脚本中做事件绑定，既可以避免关键字、作用域冲突问题，也方便后续做逻辑维护、事件解绑操作。
• 碰到括号相关的语法错误时，如果核对括号数量、位置都没有问题，优先检查报错位置附近是否存在关键字误用、操作数漏写的情况——JS解析器抛出的括号类语法错误，很多时候不是括号本身写错，是前面的语法不符合规则，导致解析器对后续token的判定出现偏差。

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