Javascript 删除DOM无法识别的类

我正在制作一个交互式地图，它会触发一个覆盖图像（突出显示选定区域）

但是现在我向一个div添加类，如果我突出显示另一个区域，我想删除它们。首先，我尝试使用start with指示符删除以

hl-

开头的类这是我的js文件：

$('.btn-pointer').click(function() {
       $('.highlight-layer').removeClass('[class^="hl-"]');
});

$('.btn-sp').click(function() {
    $('.highlight-layer').addClass('hl-sp');
    $('.popover').not(this).popover('hide');
});

$('.btn-vp').click(function() {
    $('.highlight-layer').addClass('hl-vp');
    $('.popover').not(this).popover('hide');
});

$('.btn-sl').click(function() {
    $('.highlight-layer').addClass('hl-sl');
    $('.popover').not(this).popover('hide');
});

$('.btn-ec').click(function() {
    $('.highlight-layer').addClass('hl-ec');
    $('.popover').not(this).popover('hide');
});

以下是html：

<div>
    <img src="../img/map/map-full.jpg" alt="">
    <button class="btn btn-sp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Safaripark</h2>">Safaripark</button>
    <button class="btn btn-vp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Vakantiepark</h2>">Vakantiepark</button>
    <button class="btn btn-sl btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Speelland</h2>">Speelland</button>
    <button class="btn btn-ec btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Event Center</h2>">Event Center</button>
    <div class="highlight-layer hl-ec"></div>
</div>

萨法里公园
瓦坎蒂公园
斯佩兰
活动中心

---

我试图创建一个外部资源，但从未添加外部资源，因此它给我的错误如下：

未捕获错误：引导程序的JavaScript需要jQuery

removeClass

不接受选择器，它接受一系列以空格分隔的类来删除。因此，只需列出您要删除的内容：

$('.highlight-layer').removeClass('hl-sp hl-vp hl-sl hl-ec');

如果其中一个（或实际上所有）不在任何给定元素上，则没有问题；正在/正在删除的一个将被删除

例如：

$（“输入[type=button]”）。在（“单击”，函数（）{
$（“.highlight layer”）.removeClass（“hl sp hl vp hl sl hl ec”）；
});
.hl sp{
颜色：红色；
}
.hl副总裁{
颜色：绿色；
}
.hl sl{
颜色：蓝色；
}
.hl ec{
颜色：灰色；
}

从hl sp开始
从hl vp开始
从hl sl开始
从hl ec开始
您可以使用
removeClass
的回调来根据起始字符串等筛选出要删除的类

$('.highlight-layer').removeClass(function(i, klass) {
    var remove = 'hl-';

    return klass.split(/\s/).filter(function(k) {
        return k.indexOf(remove) === 0;
    }).join(' ');
});


您只需更改代码中的一行代码，它就会起作用。请检查下面的代码，删除所有类，只保留基本类
突出显示层
：

$('.btn-pointer').click(function() {
    $('.highlight-layer').removeClass().addClass('highlight-layer');
});

像这样，元素类总是两个突出显示层和点击按钮类

希望这有帮助。
您可以向
jQuery
添加扩展名，该扩展名将遍历从选择器返回的元素并删除列表

以下是一个基本示例：



$.fn.removeClasses=函数（regex）{
Array.prototype.forEach.call（this，function（el）{
var class_list=el.classList；
var filtered_list=Array.prototype.filter.call（类_list，函数（c）{
返回正则表达式测试（c）；
});
console.log（过滤的_列表）；
$（el）.removeClass（筛选的\u list.join（“”））
});
}
$（“.foo”）。在（“单击”，函数（）{
var reg=/^test/；
$（此）.removeClasses（reg）；
});
.test{
背景：#333；
}
.test1{
颜色：#fff；
}
.test2{
边框：1px纯色灰色；
}
.test3{
填充：10px；
}

试验
好的，这就是您尝试过的，会发生什么？它失败了吗？如果是，怎么做？有什么错误吗？在控制台中？
removeClass
不以这种方式工作，它不接受部分属性，它接受您要删除的类名，不多不少。它不会给我任何错误，它只是不断地将类添加到
。高亮显示层
，这让我在switching@Beginnerprogrammer：如果您想保留其中一个，请将其从字符串中删除。如果您成功地创建了一个应用程序（最好使用堆栈片段--
工具栏按钮，而不是JSFIDLE），我将能够向您展示如何在上下文中实现这一点。似乎您正试图操纵类来对引导式弹出窗口进行一些处理，这些弹出窗口是用它们自己的类集动态生成的，在这个过程中的某个地方，您遇到了问题。谢谢您忘了将其包装在我的单击函数0.0“”中