某些格式

Question

的所有div元素删除特定的类我想删除所有类与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>

Answer 1

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

根据您提供的代码，您可以简单地创建班级列表的副本，使其不再存在。您可以通过调用.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(); 
}); 

Answer 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); 
     }) 
    });