Question

我需要删除某个类的所有元素。我搜索并尝试了大多数选项，但没有使它在IE11上工作，我知道IE不支持remove（）本机Javascript函数，但支持removeChild（）。使用removeChild（），我收到以下消息：＆＃34;对象不支持属性或方法＆＃39; removeChild＆＃39;＆＃34;。

HTML：

＆＃13;

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

＆＃13;

我想删除类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)

Answer 2

首先，你的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功能

，而不是使用按钮点击

Answer 3

两个问题：

您的HTML标记错过了=：
```
<div class"contentHolder">
```
如果您通过elements获得document.getElementsByClassName，请注意这是 live 集合。删除元素时，列表会变短，因此您不会删除所有内容：反向迭代。

修复了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>

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>

使用类javascript

4 个答案: