javascript - 使用 JavaScript 从 HTML 元素中删除类

Question

我正在尝试使用 JavaScript 从 html 标签中删除一个类，但我不知道从哪里开始。我已经搜索过但没有结果。虽然我对 jQuery 相当流利，但我不懂 JavaScript，在这种情况下我需要使用 JavaScript。到目前为止我发现的任何内容都需要根据我自己的使用进行调整，但我在这方面还没有成功。希望有人能以一种万无一失的方式解释它。

类所附加的元素是“ul”标签。该类名为“nojavaScript”，仅应用于“ul”标记的单个实例。正如我所说，该类仅在页面中使用一次，而“ul”标签则在具有不同类或 id 的其他实例中使用。如果这会让 JavaScript 变得更容易，我可以将类更改为 id。

我希望我已经给了你足够的东西让你继续下去。我将在下面提供一个 html 代码示例。

<ul id="lines_list" class="nojavaScript"></ul>

正如我提到的，如果删除 id 比删除类更容易，我可以将当​​前 id 设为类，将当前类设为 id。但本质上是需要删除“nojavaScript”。

谢谢!

Answer 1

这是一个纯js解决方案:

var ulArr = document.getElementsByClassName('nojavaScript');
for (var i = 0; i < ulArr.length; i++) {
     ulArr[i].className = ulArr[i].className.replace('nojavaScript','');   
}

首先选择具有给定类名的所有元素，然后迭代结果并将 className 属性中的给定类替换为空字符串。

更新:

这里有一个更强大的解决方案，它将删除操作转换为参数化函数，并处理从 className 属性的开头、结尾和中间删除额外的空格。

function removeClass(elem, className) {
    //declare some regexes to help us strip the extra whitespace
    var trimLeft = /^\s+/,
        trimRight = /\s+$/,
        stripDouble = /\s+/g;
    //remove the class, strip extra whitespace, and reassign className
    elem.className = elem.className.replace(className, '').replace(trimLeft, '').replace(trimRight, '').replace(stripDouble, ' ');
}

//declare name of class to remove and get an array of elements with that class
var toRemove = 'nojavaScript',
    elArr = document.getElementsByClassName(toRemove);

//iterate over elements and remove the class
for (var i = 0; i < elArr.length; i++) {
    removeClass(elArr[i], toRemove);
}

Here's a live demo ->