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

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
– Kaddath, Commented Jan 29, 2018 at 8:55

bhb · Accepted Answer · 2018-01-29 08:52:37Z

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, 2018 at 8:52

bhb

2,5914 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tyra Pululi Over a year ago

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

trincot · Accepted Answer · 2018-01-29 08:56:26Z

2

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>

answered Jan 29, 2018 at 8:56

trincot

357k38 gold badges282 silver badges338 bronze badges

3 Comments

Léo R. Over a year ago

I think your forgot an element in for loop

Léo R. Over a year ago

Where is the condition for the loop to run and stop?

trincot Over a year ago

@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.

Niveditha Karmegam · Accepted Answer · 2018-01-29 08:59:13Z

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

Milan Chheda · Accepted Answer · 2018-01-29 08:55:50Z

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>

Collectives™ on Stack Overflow

remove all elements with class javascript

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related