Removing elements by class name?

Question

I have the code below to find elements with their class name:

// Get the element by their class name var cur_columns = document.getElementsByClassName('column'); // Now remove them for (var i = 0; i < cur_columns.length; i++) { } 

I just don’t know how to remove them ..... Do I have a link to a parent or something like that? What is the best way to handle this?

@ Karim79:

Here is the JS:

 var col_wrapper = document.getElementById("columns").getElementsByTagName("div"); var len = col_wrapper.length; alert(len); for (var i = 0; i < len; i++) { if (col_wrapper[i].className.toLowerCase() == "column") { col_wrapper[i].parentNode.removeChild(col_wrapper[i]); } } 

Here is the HTML:

 <div class="columns" id="columns"> <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> <div name="columnClear" class="contentClear" id="columnClear"></div> </div> 

Edit: As a result, the use of the jQuery option has ended.

Answer 1

Using jQuery (which you could really use in this case, I think), you can do it like this:

 $('.column').remove(); 

Otherwise, you will need to use the parent element of each element to remove it:

 element.parentNode.removeChild(element); 

Answer 2

If you prefer not to use jQuery:

 function removeElementsByClass(className){ var elements = document.getElementsByClassName(className); while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } } 

Answer 3

Using ES6, you can do this:

 const removeElements = (elms) => elms.forEach(el => el.remove()); // Use like: removeElements( document.querySelectorAll(".remove") ); 

 <p class="remove">REMOVE ME</p> <p>KEEP ME</p> <p class="remove">REMOVE ME</p> 

Answer 4

Without jQuery you can do:

 const elements = document.getElementsByClassName("my-class"); while (elements.length > 0) elements[0].remove(); 

Answer 5

Brett - did you know that getElementyByClassName support from IE 5.5 to 8 does not exist according to quirksmode ? You are better off following this scheme if you need compatibility with multiple browsers:

• Get container element by identifier.
• Get children by tag name.
• Iterate over children, check the conformity of the className property.
• elements[i].parentNode.removeChild(elements[i]) , as the other guys said.

Quick example:

 var cells = document.getElementById("myTable").getElementsByTagName("td"); var len = cells.length; for(var i = 0; i < len; i++) { if(cells[i].className.toLowerCase() == "column") { cells[i].parentNode.removeChild(cells[i]); } } 

Here is a quick demo.

EDIT: Here is a fixed version specific to your markup:

 var col_wrapper = document.getElementById("columns").getElementsByTagName("div"); var elementsToRemove = []; for (var i = 0; i < col_wrapper.length; i++) { if (col_wrapper[i].className.toLowerCase() == "column") { elementsToRemove.push(col_wrapper[i]); } } for(var i = 0; i < elementsToRemove.length; i++) { elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]); } 

The problem was my mistake; when you remove an element from the resulting array of elements, the length changes, so one element is skipped at each iteration. The solution is to store a reference to each element in a temporary array, and then outline them, removing each of the DOMs.

Try it here.

Answer 6

It works for me

 while (document.getElementsByClassName('my-class')[0]) { document.getElementsByClassName('my-class')[0].remove(); } 

Answer 7

I prefer using forEach over a for / while loop. To use it, you need an HTMLCollection convert an HTMLCollection to an Array :

 Array.from(document.getElementsByClassName("post-text")) .forEach(element => element.remove()); 

Please note this is not the most efficient way. Just much more elegant for me.

Answer 8

Yes, you must remove from the parent:

 cur_columns[i].parentNode.removeChild(cur_columns[i]); 

Answer 9

You can use this syntax: node.parentNode

For example:

 someNode = document.getElementById("someId"); someNode.parentNode.removeChild(someNode); 

Answer 10

A recursive function can solve your problem as below

 removeAllByClassName = function (className) { function findToRemove() { var sets = document.getElementsByClassName(className); if (sets.length > 0) { sets[0].remove(); findToRemove(); } } findToRemove(); }; // removeAllByClassName(); 

Answer 11

If you want to remove items that are added dynamically, try the following:

 document.body.addEventListener('DOMSubtreeModified', function(event) { const elements = document.getElementsByClassName('your-class-name'); while (elements.length > 0) elements[0].remove(); }); 

Answer 12

 const elem= document.getElementsByClassName('column') for (let i = elem.length; 0 < i ; ) elem[--i].remove(); 

OR

 const elem= document.getElementsByClassName('column') while (elem.length > 0 ) elem[0].remove(); 

Answer 13

You should try jQuery, it’s much easier to select elements and edit them.

With jQuery, your code should look like this:

 $( document ).ready( function() { // Select all elements with class name 'className' and remove them $( ".className" ).remove(); }); 

Instead of deleting, you can change the css display property to none!

 // Get the element by their class name var cur_columns = document.getElementsByClassName('column'); // Now remove them cur_columns.style.display= "none"; 

Hope this helps!

Answer 14

Error of missing elements in this (code above)

 var len = cells.length; for(var i = 0; i < len; i++) { if(cells[i].className.toLowerCase() == "column") { cells[i].parentNode.removeChild(cells[i]); } } 

can be fixed simply by running the loop back as follows (so that a temporary array is not needed)

 var len = cells.length; for(var i = len-1; i >-1; i--) { if(cells[i].className.toLowerCase() == "column") { cells[i].parentNode.removeChild(cells[i]); } } 

Answer 15

You can use a simple solution by simply changing the class, the HTML Collection filter will be updated:

 var cur_columns = document.getElementsByClassName('column'); for (i in cur_columns) { cur_columns[i].className = ''; } 

Link: http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html