如何使用纯JavaScript移除深层嵌套元素的指定类名

对于多层嵌套的DOM结构，不需要逐层遍历获取元素，直接通过DOM选择器定位到目标元素后操作类名即可，以下是具体实现：

方案1：直接定位目标元素操作 #

如果目标类remove-me不会和页面其他元素冲突，直接全局查询目标元素后移除类即可：

// 查询第一个匹配.remove-me的元素
const target = document.querySelector('.remove-me')
// 可选链写法兼容元素不存在的场景，避免报错
target?.classList.remove('remove-me')

方案2：限定层级范围查询，避免误选 #

如果页面其他位置也存在带remove-me类的元素，可以通过父级选择器缩小查询范围，精准匹配嵌套结构里的目标元素：

// 仅匹配.wrapper嵌套结构内的.remove-me元素
const target = document.querySelector('.wrapper .a .b .c .remove-me')
if (target) {
  target.classList.remove('remove-me')
}

补充场景 #

移除目标元素的所有类名 #

如果需要清空该元素的全部类，不用逐个移除，直接修改className属性即可：

const target = document.querySelector('.remove-me')
if (target) {
  target.className = ''
}

已有外层元素引用的场景 #

如果已经提前获取到外层父元素的引用，可以直接在父元素范围内查询子元素，性能比全局查询更高：

const wrapper = document.querySelector('.wrapper')
const target = wrapper.querySelector('.remove-me')
target?.classList.remove('remove-me')

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