如何删除以某个字符串开头的类？

Question

我试图删除以某个字符串开头的类。

这是我的代码：

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

myfunction();

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

Answer 1

好的，有很多解决方案

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

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

还 classList一个DOMTokenList，它是一个集合，因此我们需要对其进行迭代以测试列表中的每个值，以查看它是否满足特定条件

如何解决这个问题呢 ？

第一个解决方案

使用startWith字符串方法

如何 ？

1. 迭代 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>

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

如何 ？使用特殊插入符号来测试输入是否以指定值开头

例子

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>

Answer 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>