纯JavaScript中如何移除包括嵌套元素在内的所有指定class

前置用法修正 #

你之前示例中的用法存在错误：Element.remove() 是用来删除整个DOM元素的API，如果要移除元素上的指定类，需要使用 classList.remove() 方法。

全局移除所有container类的实现方案 #

要匹配到页面内所有嵌套层级下带有container类的元素，直接使用document.querySelectorAll()即可，该方法会递归查询整个DOM树中符合选择器规则的所有元素，再遍历移除对应类即可：

// 匹配页面所有带container类的元素
const containerElements = document.querySelectorAll('.container');
// 遍历移除每个元素的container类
containerElements.forEach(el => el.classList.remove('container'));

如果你需要兼容低版本浏览器，可先将返回的NodeList转为数组再遍历：Array.from(containerElements).forEach(...)

运行上述代码后你给出的示例结构会变为如下形式：

<div class='my-div'>
    <div>
        <div>
        DIV
        </div>
    </div>
</div>

限定范围移除的方案 #

如果你不需要处理全局元素，只想在某个指定父元素的范围内移除container类，可以将查询范围限定在该父元素下，注意额外处理父元素自身的类：

// 选中父元素
const parent = document.querySelector('.my-div');
// 仅查询父元素后代中的container类元素
const innerContainers = parent.querySelectorAll('.container');
// 移除后代元素的类
innerContainers.forEach(el => el.classList.remove('container'));
// 移除父元素自身的container类
parent.classList.remove('container');

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