CODEWITHSUNDEEP
javascripthtml
Tyra Pululi
Tyra Pululi

Reputation: 446

remove all elements with class javascript

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

Upvotes: 3

Views: 7363

Answers (4)

L&#233;o R.
L&#233;o R.

Reputation: 2698

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

Upvotes: 2

trincot
trincot

Reputation: 350127

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>

Upvotes: 2

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 0

bhb
bhb

Reputation: 2561

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)

Upvotes: 2

Related Questions