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

remove()在纯Javascript中使用,您可以使用以下代码自行声明:

// 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()native函数从父节点中删除了该元素.

解决方案n°2

removeChild()在包括IE在内的所有浏览器上使用纯JavaScript,只需将其命名为remove().

element.removeChild(child);

有关 Mozilla Developer Network的更多信息.

解决方案n°3

通过code.jquery.com CDN使用以下代码使用jQuery:

<!-- 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]);             
}

或使用MDN的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]);

remove()jQuery中还有一个方法,它可以跨浏览器工作,但这需要添加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);
}