CODEWITHSUNDEEP
javascriptgetelementsbyclassname
apielotje
apielotje

Reputation: 41

How to find and remove DOM elements by multiple class names

I wrote a function to remove all the elements with a certain class. I tried to make the function so that I can input multiple classes, divided by '|' sings.

Somehow it is nog working correctly, some elements are deletet, some ar not... Can somebody tell me what ik am doing wrong?

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>

Upvotes: 1

Views: 813

Answers (3)

Boaz
Boaz

Reputation: 20230

How to select and remove elements of multiple classes

To find all elements of a group of classes, simply use the querySelectorAll method with a comma-separated list of classes. This method would return a nodeList containing all matching elements, which you can then loop and remove from the DOM.

For example:

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

How to make this into a reusable function

If you want to make this into a reusable function, you can use the map and join methods to turn an array of classes into a multiple classes selector:

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

Upvotes: 1

ilai
ilai

Reputation: 126

When you are removing an element you are forgetting that the array of elements is getting shorter.

change your second FOR loop to run from the end of the array like this:

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

Upvotes: 2

jy95
jy95

Reputation: 783

Use Jquery . It will be more easier that now.

So , your function becomes :

function removeElement(classNames){

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

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

Upvotes: 1

Related Questions