IE11移除指定class元素异常：remove()不兼容与removeChild()失效排查

一、正确移除所有.contentInfo元素的IE兼容方案 #

你遇到的问题根源有两个：一是document.getElementsByClassName()返回的是动态HTMLCollection，这个集合会随着DOM的修改自动更新；二是IE11不支持原生的Element.remove()方法，但支持parentNode.removeChild()。

之前的for循环只移除了第一个容器内的元素，是因为当你删掉第一个元素后，HTMLCollection的长度会立刻缩短，i继续递增就会跳过后续的目标元素，导致遍历不完整。这里有两种可靠的解决思路：

方法1：将动态集合转为静态数组遍历

先把动态的HTMLCollection转换成普通数组，这样遍历过程不会受DOM变化影响：

// IE11支持该转换写法，把动态集合转为静态数组
var elements = Array.prototype.slice.call(document.getElementsByClassName('contentInfo'));

// 遍历数组移除每个元素
for (var i = 0; i < elements.length; i++) {
  // 先判断父节点是否存在，避免潜在报错
  if (elements[i].parentNode) {
    elements[i].parentNode.removeChild(elements[i]);
  }
}

方法2：用while循环处理动态集合

直接针对动态集合操作，每次移除第一个元素，直到集合为空：

var elements = document.getElementsByClassName('contentInfo');
while (elements.length > 0) {
  var targetEl = elements[0];
  if (targetEl.parentNode) {
    targetEl.parentNode.removeChild(targetEl);
  }
}

这种方法无需转换数组，每次取集合的第一个元素移除，动态集合会自动更新长度，直到所有目标元素都被清理完毕。

二、为什么menu.classList.remove('desactive')在IE11中能正常工作？ #

这是两个完全不同的API：

• Element.remove()：是直接移除元素本身的DOM方法，属于ES2015新增特性，IE11完全没有实现这个方法，所以调用会报错。
• element.classList.remove(className)：是操作元素类名集合的方法，IE11部分支持classList接口，它实现了add()、remove()、toggle()和contains()这些基础方法，因此这个调用在IE11中可以正常生效。

需要注意的是，IE11的classList不支持一些较新的方法（比如replace()、entries()），但基础的类名增删查改是没问题的。

内容的提问来源于stack exchange，提问作者Tyra Pululi