javascript - 删除所有带有 javascript 类的元素

Question

我需要删除具有特定类的所有元素。 我搜索并尝试了大部分选项，但无法在 IE11 上运行，我知道 IE 不支持 remove() native Javascript 函数，但支持 removeChild()。 使用 removeChild() 我收到以下消息:“对象不支持属性或方法‘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>

我想删除所有带有 contentInfo 类的 div 此脚本适用于除 IE11 以外的所有浏览器。我知道这是因为不支持 .remove()。

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

所以我试过了，但它只适用于第一个 contentHolder。

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

我不明白的另一件事是:为什么下面的行在使用 .remove() 时有效？我用它来删除菜单的一个类。

menu.classList.remove('desactive');

Answer 1

使用这个 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]);

更多详情 here和 here (MDN)