remove

remove

简介

该ChildNode.remove()方法从它所属的树中删除对象。

语法

node.remove（）; 

示例

<div>
    <div id="testOne">test-1</div>
    <div id="testTwo">test-2</div>
</div>

var testOne = document.getElementById("testOne"),
    testTwo = document.getElementById("testTwo");
testTwo.onclick = function(){
    testOne.remove();
}

注意：ChildNode.remove()是不可复制的

该remove()方法不于with语句

with(node) { 
  remove();
}
// ReferenceError: remove is not defined

应用场景

• 用户操作后，页面不在需要这个节点，可以从文档中删掉这个节点，而不是隐藏这个节点
• 删除弹窗dialog
• 删除提示toast，tips

浏览器兼容性

特征	Chrome	Firefox	Safari	Edge	IE	Opera
基本支持	yes	yes	yes	13[1]	no	yes

[1] 并非所有版本的Edge都支持remove()，Edge12就不支持该方法

Polyfill

可以使用以下代码在Internet Explorer 9及更高版本中填充（亲测有效IE9+）：

// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        if (this.parentNode !== null)
          this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

参考：

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove