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 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');

• javascript
• html

• 4 Possible duplicate of Remove element by id – Adelin Commented Jan 29, 2018 at 8: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 Commented Jan 29, 2018 at 8:55

4 Answers 4

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)

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>

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

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>