js实现点击隐藏
使用 display 属性隐藏元素
通过修改元素的 style.display 属性为 "none" 可以隐藏元素。点击事件触发后，元素会从DOM中完全移除，不占据空间。
document.getElementById('elementId').addEventListener('click', function() {
this.style.display = 'none';
});使用 visibility 属性隐藏元素
通过设置 style.visibility 为 "hidden" 隐藏元素，但元素仍占据布局空间。适合需要保留占位的场景。
document.querySelector('.elementClass').addEventListener('click', function() {
this.style.visibility = 'hidden';
});使用 classList 切换隐藏类
通过CSS定义隐藏类（如 .hidden），利用 classList.toggle() 或 classList.add() 动态切换显示状态。这种方式更易于维护样式。
// CSS需提前定义
// .hidden { display: none; }
const button = document.querySelector('#toggleButton');
button.addEventListener('click', function() {
document.getElementById('targetElement').classList.toggle('hidden');
});淡出效果隐藏（结合CSS动画）
通过添加透明度过渡实现平滑隐藏效果。需配合CSS的 transition 属性。
const fadeElement = document.querySelector('.fadeElement');
fadeElement.addEventListener('click', function() {
this.style.opacity = '0';
setTimeout(() => this.style.display = 'none', 500); // 等待动画完成
});动态移除DOM节点
直接通过 remove() 方法删除元素节点，适用于不需要恢复显示的场景。
document.querySelector('.removeButton').addEventListener('click', function() {
document.querySelector('.toRemove').remove();
});注意事项
- 事件委托：动态生成的元素需通过事件委托绑定点击事件。
- 性能考虑：频繁操作DOM时建议使用
classList而非直接修改style。 - 可访问性：隐藏元素时如需对屏幕阅读器友好，可结合
aria-hidden属性。
