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

Question

我编写了一个函数来删除某个类中的所有元素。 我试图使函数，以便我可以输入多个类，除以“ |” 唱歌。

它以某种方式正常工作，删除了某些元素，有些却没有...有人可以告诉我ik在做什么错吗？

 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

如何选择和删除多个类的元素

要查找一组类的所有元素，只需将querySelectorAll方法与以逗号分隔的类列表一起使用。 此方法将返回一个包含所有匹配元素的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方法将一个类的数组转换为多个类选择器：

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