JavaScript如何避免重复函数实现点击元素自隐及批量隐藏同类元素

你不需要为每个td单独编写绑定函数，只需要给需要可点击隐藏的td加统一的类标识，即可实现需求：

完整代码示例 #

HTML部分 #

<table>
  <tr>
    <th id="clearAllBtn">Clear all</th>
  </tr>
  <tr>
    <!-- 所有需要支持点击隐藏的td统一加hideable类，无需单独绑定onclick、无需单独设置id -->
    <td class="hideable">text1</td>
    <td class="hideable">text2</td>
    <td class="hideable">text3</td>
    <!-- 后续新增可隐藏td只需加hideable类，不需要修改JS代码 -->
  </tr>
</table>

JavaScript部分 #

// 单个td点击隐藏自身，完全匹配你想要的类似clear.self的效果
document.querySelectorAll('.hideable').forEach(cell => {
  cell.addEventListener('click', function() {
    this.style.opacity = '0';
  });
});

// Clear all按钮点击隐藏所有td
document.querySelector('#clearAllBtn').addEventListener('click', () => {
  document.querySelectorAll('.hideable').forEach(cell => {
    cell.style.opacity = '0';
  });
});

高性能进阶方案（适用于td数量较多、或td会动态新增的场景） #

可以用事件委托，不用给每个td单独绑定事件，父元素统一监听即可：

// 先给table加id="dataTable"
document.querySelector('#dataTable').addEventListener('click', e => {
  // 仅当点击的是可隐藏td时触发隐藏逻辑
  if (e.target.classList.contains('hideable')) {
    e.target.style.opacity = '0';
  }
});

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