删除所有带有class为javascript的元素。

Question

我需要移除所有特定类的元素。我搜索并尝试了大部分选项，但在IE11上无法使其工作。我知道IE不支持remove()原生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>

我想删除所有带有 class 为 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');

- Tyra Pululi

---

可能是按ID删除元素的重复问题。 - Adelin

请注意，您的for循环版本由于代码中缺少“=”而留下了一个要删除的元素（感谢Leo.R）。 - Kaddath

Answer 1

请使用这个兼容性补丁。

(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]);

更多细节 在这里 和 这里（MDN）

- bhb

---

这是我找到并尝试的第一个答案，但没有使其工作。我认为我在for循环中犯了一个错误，现在尝试使用原始的while循环，完美地解决了问题。谢谢。 - Tyra Pululi

Answer 2

两个问题：

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

使用 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>

- trincot

---

我认为你在for循环中忘记了一个元素。 - Léo R.

循环运行和停止的条件在哪里？ - Léo R.

@LeoR，条件部分是用来减少 i 的值，因此通常用于这种递减的最后一部分没有使用。目前的条件检查了在递减之前 i 的值。如果递减发生在最后一部分，则不可能进行这种检查。当然，有很多替代方法可以使反向循环工作。 - trincot

Answer 3

首先，您在HTML类中漏掉了"="。因此，使用此示例应该可以正常工作：

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()" />

你可以使用 .ready 函数来代替按钮点击操作

- Léo R.

Answer 4

你可以使用 document.querySelectorAll(".contentInfo"); 选择所有该类别的元素，然后通过循环逐个删除它们：

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>

- Milan Chheda