某些格式

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