时间戳

首页 > 解决方案 > 如何删除以某个字符串开头的类？

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

问题描述

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

这是我的代码：

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

myfunction();
<div class="page-parent pop">
  check out
</div>

标签： javascriptecmascript-6

解决方案

好的，有很多解决方案

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

在您的代码中，您只需删除应该是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>

推荐阅读