Как найти и удалить элементы DOM несколькими именами классов

Question

Я написал функцию для удаления всех элементов с определенным классом. Я попытался сделать эту функцию так, чтобы я мог вводить несколько классов, разделенных на '|' поет.

Как-то он работает нормально, некоторые элементы удаляются, некоторые не ... Может кто-нибудь сказать мне, что ik делает неправильно?

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

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