从特定格式的所有 div 元素中删除特定类答案

【问题标题】：Removing specific classes from all div elements of certain format从特定格式的所有 div 元素中删除特定类
【发布时间】：2016-04-27 03:46:16
【问题描述】：

我想删除所有以 nf- 开头的类

Console image

JSfiddle https://jsfiddle.net/zapjelly/fda3Lm84/11/

我有以下 HTML/JS：

var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');

Array.prototype.map.call(nfClasses, function(elem) {
  Array.prototype.map.call(elem.classList, function(classStr) {
    if (classStr.match(/^nf\-/)) elem.classList.remove(classStr);
  });
});

<p>Remember to inspect element on the input below</p>
<div class="custom-nf">
  <div class="input nf-input-outer nf-validation">
    <div class="nf-container">
      <div class="nf-outer nf-outer-input nf-outer-validation">
        <div class="nf-middle">
          <div class="nf-inner">
            <label for="dummy" class="nf-label"></label>
            <input id="dummy" type="text" class="nf-input">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

querySelectorAll 未收集您需要的类，尝试修复以选择所需的类
@PatrickEvans 我不认为这是重复的。 OP 正在尝试从元素中删除特定的 classes。他们并没有尝试删除重复项中的元素。

标签： javascript html css

【解决方案1】：

正如MDN 所述，.classList property 返回元素的类属性的live DOMTokenList。关键是该列表是实时的，这意味着当您删除类时，您在迭代它们时会无意中跳过一些其他类。

根据您提供的代码，您可以简单地创建类列表的副本，使其不再存在。您可以通过调用.slice() 方法来做到这一点：

Updated Example

var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');
Array.prototype.forEach.call(nfClasses, function(element) {
  var classListCopy = Array.prototype.slice.call(element.classList);
  classListCopy.forEach(function(className) {
    if (className.match(/^nf\-/)) {
      element.classList.remove(className);
    }
  });
});

或者，您也可以向后迭代类。这样做不会跳过任何课程：

Updated Example

var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');
Array.prototype.forEach.call(nfClasses, function(element) {
  for (var i = element.classList.length; i >= 0; i--) {
    if (element.classList[i] && element.classList[i].match(/^nf\-/)) {
      element.classList.remove(element.classList[i]);
    }
  }
});

第三种选择是只使用正则表达式来替换类：

var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');
Array.prototype.forEach.call(nfClasses, function(element) {
  element.className = element.className.replace(/\bnf-\S+\b/g, '').trim();
});

【讨论】：

谢谢乔希！很好的答案！

【解决方案2】：

更新了内部循环以按照建议进行切片并且现在可以正常工作

https://jsfiddle.net/zapjelly/fda3Lm84/12/

var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');

Array.prototype.map.call(nfClasses,
    function(elem){
    Array.prototype.slice.call(elem.classList).map(
        function(classStr){
            if(classStr.match(/^nf\-/)) elem.classList.remove(classStr);
        })
  });

【讨论】：