JavaScript remove（）在IE中不起作用

Question

我在JavaScript中有以下代码：

all_el_ul = document.getElementsByClassName('element_list')[0];
div_list = all_el_ul.getElementsByTagName("div");
for (i = 0; i < div_list.length; i += 1) {         
  div_list[i].remove();             
}

我知道这是问题，因为我使用alert('test');来查看代码停止工作的位置。 一切都在FF，Chrome，Opera和其他工作，但不在IE中。

你能告诉我有什么问题吗？

Answer 1

  

IE不支持remove()本机Javascript功能，但确实如此   支持removeChild()。

remove（）

的浏览器兼容性

解决方案n°1

在纯Javascript中使用remove() ，您可以自己声明，并使用以下代码：

// Create Element.remove() function if not exist
if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}
// Call remove() according to your need
child.remove();

正如您所看到的，该函数获取了element的父节点，然后使用removeChild()本机函数从父节点中删除了该元素。

解决方案n°2

在包含IE的所有浏览器上使用纯JavaScript中的removeChild() ，只需将其称为remove()。

element.removeChild(child);

Mozilla开发者网络上的

More info。

溶液n°3

使用以下代码

使用jQuery 到code.jquery.com CDN：

<!-- Include jQuery -->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<!-- Use remove() -->
<script>
child.remove();
</script>

该函数包含在jQuery库中，因此您可以在包含后调用它。

快乐的编码！ ： - ）

Answer 2

原生childNode.remove()是Internet Explorer中不支持的新实验方法，仅在Edge中

来自MDN

的兼容性表格

您可以使用支持范围更广的Node.removeChild代替

var all_el_ul = document.getElementsByClassName('element_list')[0];
var div_list  = all_el_ul.getElementsByTagName("div");

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

或使用polyfill from MDN添加对所有浏览器的支持

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

jQuery中还有一个remove()方法， 跨浏览器工作，但这需要添加jQuery库。

$('.element_list').first().find('div').remove();

作为旁注getElementsByClassName仅适用于IE9及以上，使用querySelector也会添加IE8支持

var all_el_ul = document.querySelector('.element_list');

Answer 3

尝试将其添加到JavaScript文件的顶部：

if (!('remove' in Element.prototype)) {
  Element.prototype['remove'] = function () {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

这是一个小的Element.remove()填充。

将其添加到您的JS中，[element].remove()应该神奇地开始在IE中工作。

Answer 4

以下是我在IE中工作所必须做的事情

if (typeof textField.remove === 'function') {
  textField.remove();
} else {
  textField.parentNode.removeChild(textField);
}

Answer 5

请尝试这个。 （支持所有浏览器）

var child = document.getElementById(id);
child.parentNode.removeChild(child);