JS-移除class_js removeclass-CSDN博客

本文链接：https://blog.csdn.net/qq_40850291/article/details/115631696

JS-移除class

文章目录

JS-移除class
移除class
一、问题
二、代码
三、结果

移除class

一、问题

找到class为XXX的标签，然后删除这些标签对应的class
使用Element.classList的remove(),add()方法

 Element.classList.add(className)
 Element.classList.remove(className)

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移除class</title>
</head>
<body>
    <div id="root" class="container wrapper">
        <div class="top container"></div>
        <div class="header container">
            <ul>
                <li>第1个</li>
                <li>第2个</li>
                <li>第3个</li>
                <li>第4个</li>
                <li>第5个</li>
            </ul>
        </div>
        <div class="footer container"></div>
    </div>

    <script>
        let removeAllClass = (className)=>{
            //找到所有包含className的结点
            let nodeList = document.querySelectorAll(`.${className}`);
            //删除这些标签对应的class
            Array.prototype.forEach.call(nodeList,(el)=>{
                el.classList.remove(className)
            })
        }

        removeAllClass("container");
    </script>
</body>
</html>