如何通过多个 class 名称查找和删除 DOM 元素

Question

我写了一个函数来删除所有带有某个class的元素。我试图制作函数以便我可以输入多个 classes，除以'|'唱。

不知怎么的，它不能正常工作，有些元素被删除了，有些没有... 有人可以告诉我我做错了什么吗？

function removeElement(classNames){
 
 var classNamesArray = classNames.split("|");
 
 for (var i = 0; i < classNamesArray.length; i++) {
  alert(classNamesArray[i]);
  var elements = document.getElementsByClassName(classNamesArray[i])
  for (var j = 0; j < elements.length; j++){
   alert(elements[j]);
   elements[j].remove();
   }
  }
 }

<div class="admin">test div1</div>
<div class="admin">test div2</div>
<div class="normal">test div3</div>
<div class="admin">test div4</div>
<span class="admin">test span1</span>
<div class="admin normal">test div1</div>
<div class="admin">test div2</div>
<div class="normal">test div3</div>
<div class="admin">test div4</div>
<span class="admin">test span1</span>

<br>

<button onClick="removeElement('admin|normal')">do it now!</button>

Answer 1

当您删除一个元素时，您会忘记元素数组正在变短。

将您的第二个 FOR 循环更改为从数组末尾开始的运行，如下所示：

for (var j = elements.length; j > 0; j--){

Answer 2

使用Jquery。现在会更容易。

因此，您的函数变为：

function removeElement(classNames){

var classNamesArray = classNames.split("|");

$.each( classNamesArray , function( key, value ) {
   $("."+key).remove();
});

Answer 3

如何select和删除多个类

的元素

要查找一组类的所有元素，只需使用 querySelectorAll 方法和类的逗号分隔列表。此方法将 return 包含所有匹配元素的 nodeList，然后您可以将其循环并从 DOM.

中删除

例如：

 // Select all elements of class1 and/or class2 and/or class3
var elementsOfMultipleClasses = document.querySelectorAll('.class1, .class2, .class3');

 // Remove all matching elements
[].forEach.call(elementsOfMultipleClasses, function(element) { element.remove(); });

如何将其变成可重复使用的函数

如果你想把它做成一个可重复使用的函数，你可以使用map和join方法把一个类的数组变成多个类 select或：

function removeElementsOfMultipleClasses(classesList) {
     // Invalid classes list
    if (!classesList || !classesList.length) return false;

     // Generate a comma-separated multiple classes selector
     // For example, '.class1, .class2, .class3'
    var classesSelector = (classesList.map(function(value) { return '.'+value })).join(',');

     // Find and remove all matching elements
    [].forEach.call(document.querySelectorAll(classesSelector),
                    function(element) { element.remove(); }
    );        
}

如何通过多个 class 名称查找和删除 DOM 元素

How to find and remove DOM elements by multiple class names

javascript

getelementsbyclassname