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

试试这个：

document.getElementById("lines_list").className = "";

Answer 2

这是一个纯粹的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 ->

Answer 3

function removeCSSClass(element, className) {
    var cssClass = ' ' + element.className + ' ';
    var index = cssClass.indexOf(' ' + className + ' ');
    if (index >= 0) {
        var newClass = cssClass.substr(0, index) + ' ' + cssClass.substr(index + className.length + 1);
        element.className = newClass;
    }
}

更新：代码现在适用于所有场合

Answer 4

应该在className属性上使用RegExp替换来修改类名称，以避免破坏应该保留的其他classNames：

var ele = document.getElementById( 'lines_list' );
ele.className = ele.className.replace( /(?:^|\s)nojavaScript(?:\s|$)/gm, ' ' );

http://jsfiddle.net/JAAulde/nWzaZ/3/

（通用类名：http://jsfiddle.net/JAAulde/nWzaZ/2/）

如果没有这个正则表达式，你可以擦除整个className，或者你过度杀戮并且可能也取出foonojavaScript的一部分（你知道，如果你有这样一个奇怪的类：P）。虽然这可能不太可能，但是当您遇到可能不具体的代码时，这是一种很好的做法。

此解决方案允许您根据需要在元素上包含尽可能多的类，而不必担心如何格式化它们而不是W3C指定的类。没有维护问题：）。

（RegExp专门查找您的类，其前面是字符串或空格的开头，后跟空格或字符串结尾）

（这假设您已经掌握了如何从DOM中获取元素的方法。）

Answer 5

function removeClassFromElement(el,className){
    var classes = el.getAttribute('class').split(/[ ]+/g);
    var class = "";
    for(var i in classes)
        if(classes[i] != className)
            class += classes[i] + " ";
    el.setAttribute('class',class);

}
removeClassFromElement(document.getElementById('lines_list'),'nojavaScript');

Answer 6

这是一个非正则规则方法，它考虑了元素上的多个类。

function removeClass(element, cssClass) {

  var classes = element.className.split(' ');

  var j = classes.length;
  while (j--) {
    if (classes[j] === cssClass) {
      classes.splice(j, 1);
    }
  }

  element.className = classes.join(' ');
}   

var lines_list = document.getElementById('lines_list');
removeClass(lines_list, 'nojavaScript');

它在空格上分割以隔离整个类名，而对类名字符串进行简单搜索并替换为空类可能会占用较长类名的一部分。

使用JavaScript从HTML元素中删除类

6 个答案: