如何选中所有元素移除指定CSS类？JS点击事件无法移除目标类怎么解决

存在的问题 #

• 选择器错误：document.querySelectorAll('menu-category')是查找自定义标签<menu-category>，你需要匹配的是类名为menu-category的元素，需补充类选择器前缀.
• 循环条件错误：querySelectorAll返回的是NodeList对象，需取.length属性获取元素总数，原循环条件i < allMenuEl永远不成立，移除类的逻辑根本不会执行
• 行内事件语法错误：onclick="GetData(, 13)"第一个参数缺省触发语法报错，会导致整个函数不执行
• HTML结构不完整：末尾div缺少闭合标签

修复后代码 #

JS部分：

// 不需要allMenuItems参数可以直接删除形参
function GetData(theCategoryId) {
    // 移除所有元素的选中类
    allMenuEl = document.querySelectorAll('.menu-category');
    for (var i = 0; i < allMenuEl.length; i++) {
        allMenuEl[i].classList.remove("menu-category-hover");
    }

    // 给当前点击元素添加选中类
    var hoverEl = document.getElementById("menu_cat_" + theCategoryId);
    hoverEl.classList.add("menu-category-hover");
}

HTML部分：

<div class="menu-category menu-category-hover" onclick="GetData(13)" id="menu_cat_13">
     <img src="/images/85783_burger.png" class="menu-home-image-img">
     <p class="menu-home-name">Burgers</p>
</div>

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