如何用JavaScript点击叉号图标？执行代码无响应求技术指导

我需要通过JavaScript执行鼠标点击操作，点击下图中的“叉号图标”。

该叉号图标具有以下标识：

• 内部HTML：<span aria-hidden="true" class="ng-clear">×</span>
• 外部HTML：<span class="ng-clear-wrapper" title="Clear all"><span aria-hidden="true" class="ng-clear">×</span></span>
• CSS选择器：tr.parameter-data:nth-child(1) > td:nth-child(2) > ng-select:nth-child(1) > div:nth-child(1) > span:nth-child(2)

我执行了以下JavaScript代码，但并未触发点击操作：

document.querySelector('[class="ng-clear"]').click()

问题排查与解决办法 #

1. 选择器精度不足 #

页面中可能存在多个带ng-clear类的元素，querySelector仅返回第一个匹配项，未必是目标元素。直接使用你提供的精准CSS选择器定位：

document.querySelector('tr.parameter-data:nth-child(1) > td:nth-child(2) > ng-select:nth-child(1) > div:nth-child(1) > span:nth-child(2)').click()

2. 元素未完成动态渲染 #

从ng-前缀判断这是Angular页面，元素可能是异步渲染的。执行代码时目标元素尚未挂载到DOM，可延迟执行或监听DOM变化：

延迟执行（简单方案）

setTimeout(() => {
  const target = document.querySelector('tr.parameter-data:nth-child(1) > td:nth-child(2) > ng-select:nth-child(1) > div:nth-child(1) > span:nth-child(2)');
  target?.click(); // 可选：用可选链避免元素不存在时报错
}, 1000); // 时间可根据页面加载速度调整

监听DOM变化（可靠方案）

const observer = new MutationObserver((mutations) => {
  const target = document.querySelector('tr.parameter-data:nth-child(1) > td:nth-child(2) > ng-select:nth-child(1) > div:nth-child(1) > span:nth-child(2)');
  if (target) {
    target.click();
    observer.disconnect(); // 找到元素后停止监听
  }
});
// 监听body下所有子元素变化
observer.observe(document.body, { childList: true, subtree: true });

3. 点击事件绑定在父元素 #

观察外部HTML，叉号的父容器ng-clear-wrapper带有title="Clear all"，点击事件可能绑定在这个父元素上，而非叉号本身：

document.querySelector('.ng-clear-wrapper').click()

4. 元素不可交互 #

检查目标元素是否处于隐藏（display: none/visibility: hidden）、禁用状态。如果是，需先移除对应状态再执行点击：

const target = document.querySelector('tr.parameter-data:nth-child(1) > td:nth-child(2) > ng-select:nth-child(1) > div:nth-child(1) > span:nth-child(2)');
if (target) {
  target.style.display = 'block'; // 若元素隐藏，先显示
  target.removeAttribute('disabled'); // 若元素禁用，移除禁用属性
  target.click();
}

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