如何删除以某个字符串开头的类？ [复制]答案

【问题标题】：How to remove the classes that begin with a certain string? [duplicate]如何删除以某个字符串开头的类？ [复制]
【发布时间】：2018-06-26 07:49:20
【问题描述】：

我正在尝试删除以某个字符串开头的类。

这是我的代码：

function myfunction() {
  const body = document.getElementsByTagName('div')[0];
  body.classList.remove('page*'); //remove page-parent
}

myfunction();

<div class="page-parent pop">
  check out
</div>

【问题讨论】：

我正在寻找通过纯 javascript 删除类名的方法，而不是使用 jquery
看第二个答案，纯JavaScript。
说真的，我希望人们在将问题标记为重复之前花点时间理解问题。另一个问题要求一个 jQuery 解决方案，这是非常沉重的。尽管有纯 JavaScript 解决方案，但使用 jQuery 标记的问题可能会被其他寻求纯 JavaScript 解决方案的人忽略。

标签： javascript ecmascript-6

【解决方案1】：

好的，这个有很多解决办法

首先是什么导致了您的问题？

在您的代码中，您只需删除应该是 page* 的类，这不是正则表达式，因为您使用的是双引号。

classList 也是一个 DOMTokenList 是一个集合，所以我们需要遍历它来测试列表中的每个值，看看它是否符合特定条件

如何解决这个问题？

第一个解决方案

使用startWith字符串方法

怎么样？

遍历classList中的每个类，检查它是否以什么开头如果是，您搜索删除它

例子

const p = document.getElementById('p');
p.classList.forEach(item=>{
    if(item.startsWith('page')) {
        p.classList.remove(item) ;
    }
})

.page-blue {
    color: blue;
}
.c {
    text-align: center;
    font-size: 1.4rem;
}

<p id="p" class=" c page-blue">
    hello I am p
</p>

你也可以使用简单的正则表达式

怎么样？使用special-caret 测试输入是否以指定值开始

例子

const p = document.getElementById('p');
p.classList.forEach(item=>{
    if(/^page/.test(item)) {
        p.classList.remove(item) ;
    }
})

.page-blue {
    color: blue;
}
.c {
    text-align: center;
    font-size: 1.4rem;
}

<p id="p" class=" c page-blue">
    hello I am p
</p>

【讨论】：

【解决方案2】：

这是一个简单的例子，使用循环正则表达式检查并删除匹配的项目。

function myfunction() {
  var div = document.getElementsByTagName('div')[0];
  
  var matches = [];
  div.classList.forEach(function (value) {
    //remove page-parent
    if (/^page.+/.test(value)) {
      matches.push(value);
    }
  });
  matches.forEach(function (value) {
      div.classList.remove(value);
  });
}

myfunction();

<div class="page-parent pop">
  check out
</div>

【讨论】：

我一次只有一节课，没有循环不行吗？
@Gras Double 感谢纠正我粗心的错误
@3gwebtrain 循环用于检查所有类。我认为内置方法或任何其他方法也可以循环。

【解决方案3】：

这是一种非常“ES6”的方式。

我们将classList 转换为带有spread operator 的数组，然后我们使用regex 过滤该数组。这给我们留下了一系列我们想要删除的类，因此我们可以对它们执行forEach 并删除它们。

我使用了一些 CSS 来显示它旁边的 divs 类。

const body = document.querySelector('div');

[...body.classList].filter(c => {
  return c.match(/^page.*/)
}).forEach(e => {
  body.classList.remove(e)
});

div:after {
  content: "("attr(class)")";
}

<div class="page-parent pop">
  check out
</div>

希望对您有所帮助。

【讨论】：