如何实现点击按钮清空Etch A Sketch彩色绘制网格

你的思路完全正确，清空画板的核心就是移除所有网格单元上标记填充状态的filled类，不需要重建网格结构，实现效率很高。

具体实现代码 #

直接补全clearGrid函数即可：

function clearGrid(){
    // 获取所有已填充的网格单元格
    const allFilledCells = document.querySelectorAll('.box.filled');
    // 遍历移除filled类，恢复单元格默认样式
    allFilledCells.forEach(cell => cell.classList.remove('filled'));
}

实现说明 #

• 该方案直接操作现有DOM节点的类名，没有新增/销毁DOM元素的开销，执行效率高
• 移除filled类后，单元格会自动匹配CSS里.box的默认浅灰色样式，同时悬停预览效果也会正常恢复
• 如果后续你扩展了自定义网格尺寸、随机颜色填充之类的功能，这个清空逻辑依然可以正常使用，不需要额外修改
• 不建议直接清空.grid容器innerHTML再重新生成网格的方案，该方案会销毁所有现有DOM节点再重新创建，有不必要的性能开销，仅适合后续需要同步重置网格尺寸的场景使用

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