remove all elements with class javascript

Question

I need to remove all the elements with a certain class. I searched and tried most of the options but didn't make it work on IE11, i am aware of IE doesn't support remove() native Javascript function but does support removeChild(). With removeChild() i get the following message: " Object doesn't support property or method 'removeChild'".

html:

<div class "main">
  <div class "contentHolder">
    <div class="contentInfo">some text</div>
    <div class="contentTxt">some text</div>
    <div class="contentTxt2">some text</div>
  </div>
  <div class "contentHolder">
    <div class="contentInfo">some text</div>
    <div class="contentTxt">some text</div>
    <div class="contentTxt2">some text</div>
  </div>
  <div class "contentHolder">
    <div class="contentInfo">some text</div>
    <div class="contentTxt">some text</div>
    <div class="contentTxt2">some text</div>
  </div>
</div>

I want to remove all the divs with the class contentInfo this script is working in all browsers but IE11. I understand that its because .remove() is not supported.

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

So I tried but it only works on the first contentHolder.

var i;
for (i = 0; i < elements.length; i++) {         
  elements[i].parentNode.removeChild(elements[i]);             
}

Another thing that I dont understand is: why the below line is working while it's using .remove()? I use it to remove a class of the menu.

menu.classList.remove('desactive');

Possible duplicate of [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) — Adelin, Jan 29 '18 at 08:51
note that your for loop version leaves one of the elements to remove, for whatever reason (missing `=` in the code thanks to Leo.R) — Kaddath, Jan 29 '18 at 08:55

score 2 · Accepted Answer · answered Jan 29 '18 at 08:52

2

Use this polyfill

(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

More details here and here (MDN)

answered Jan 29 '18 at 08:52

bhb

2,476
3
17
32

That's the first answer that I found and tried but didn't make it work. I think that I made a mistake whith the for, now tried with the original while and worked perfect. Thanks – Tyra Pululi Jan 29 '18 at 08:58

score 2 · Answer 2 · edited Jan 29 '18 at 08:59

First your you miss "=" in your html class.. So with this example this should work :

function removeElt() {

  var elements = document.getElementsByClassName("contentHolder");
  while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
  }
}

<div class="main">
  <div class="contentHolder">
    <div class="contentInfo">some text</div>
    <div class="contentTxt">some text</div>
    <div class="contentTxt2">some text</div>
  </div>
  <div class="contentHolder">
    <div class="contentInfo">some text</div>
    <div class="contentTxt">some text</div>
    <div class="contentTxt2">some text</div>
  </div>
  <div class="contentHolder">
    <div class="contentInfo">some text</div>
    <div class="contentTxt">some text</div>
    <div class="contentTxt2">some text</div>
  </div>
</div>
<input type="button" onClick="removeElt()" />

Instead of using button click you can implement a .ready function

score 2 · Answer 3 · answered Jan 29 '18 at 08:56

Two issues:

Your HTML markup misses an = here:
```
<div class"contentHolder">
```
If you got elements via document.getElementsByClassName, then be aware that this is a live collection. While you remove elements, the list gets shorter, and so you will not delete everything: iterate backwards instead.

Fixed script with removeChild:

document.getElementById('del').onclick = function () {
    var i, elements = document.getElementsByClassName('contentHolder');
    for (i = elements.length; i--;) {         
      elements[i].parentNode.removeChild(elements[i]);             
    }
};

<div class"main">
  <div class="contentHolder">
   <div class="contentInfo">some text</div>
   <div class="contentTxt">some text</div>
   <div class="contentTxt2">some text</div>
  </div>
  <div class="contentHolder">
   <div class="contentInfo">some text</div>
   <div class="contentTxt">some text</div>
   <div class="contentTxt2">some text</div>
  </div>
  <div class="contentHolder">
   <div class="contentInfo">some text</div>
   <div class="contentTxt">some text</div>
   <div class="contentTxt2">some text</div>
  </div>
</div>

<button id="del">Delete content</button>

@LeoR, the condition part is used to decrement the value of `i`, so the last part (which is usually used for such decrementing) is not used. The condition as it stands checks the value of `i` before it is decremented. This would not be possible if the decrementing happened in the last part. There are of course many alternatives to make the backwards loop work. — trincot, Jan 29 '18 at 09:20

score 0 · Answer 4 · answered Jan 29 '18 at 08:55

You fetch all elements of a class using document.querySelectorAll(".contentInfo"); and then loop them through to remove each:

var elems = document.querySelectorAll(".contentInfo");

[].forEach.call(elems, function(el) {
  el.remove();
});

<div class="main">
  <div class="contentHolder">
    <div class="contentInfo">contentInfo</div>
    <div class="contentTxt">contentTxt</div>
    <div class="contentTxt2">contentTxt2</div>
  </div>
  <div class="contentHolder">
    <div class="contentInfo">contentInfo</div>
    <div class="contentTxt">contentTxt</div>
    <div class="contentTxt2">contentTxt2</div>
  </div>
  <div class="contentHolder">
    <div class="contentInfo">contentInfo</div>
    <div class="contentTxt">contentTxt</div>
    <div class="contentTxt2">contentTxt2</div>
  </div>
</div>

remove all elements with class javascript

4 Answers4