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字符串方法

如何？

遍历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>

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>

Answer 3

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

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

我使用了一些CSS在其旁边显示div s类。

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>

希望您对此有帮助。

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

3 个答案: