javascript - trick/guideline to remove DOM element

清理DOM元素

最新推荐文章于 2022-01-04 15:05:57 发布

原创最新推荐文章于 2022-01-04 15:05:57 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

40 篇文章

订阅专栏

remove an element is not as simple as calling parent.RemoveChild, housekeeping include

remove element should clean the handler that is associated with the element, otherwise, IE will leak memory should the function reference an external DOM element
remove the data associated with the element
remove should happen on the element (the parent) and all its descendant

and there is a caveat on IE, where most browsers will reclaim the memory happily, IE does not reclaim the memory that is occupied by the removed elements until the page is left.

I am giving a pseudo-code as follow to show you you would normally write the remove function if you ever need to do so.

/**
* @Comment: this shows you how to remove DOM element from the tree, it worth the discussion because  
*   1. remove element should clean the handler that is associated with the element, otherwise, IE will leak memory should the function reference an external DOM element
*   2. remove the data associated with the element
*   3. remove should happen on the element (the parent) and all its descendant
* one caveat abou the remove, after the removal of the element, browsers may have different strategy to reclaim the memory it used, IE is an exception where it fail to reclaim 
* the memory until the page is finally left. 
* 
* so, for IE,an additional step is to set the outerHTML = "" (a trick) , which will wipe out elment from IE's memory more completely than simply doing removing child. 
*
* NOTE: this code shows example, and is not supposed to be useful without context.
*/
function remove() {
  // go through all descendants and the element to be removed.
  jQuery("*", this).add([this]).each(function () {
    // remove all bound events 
    jQuery.event.remove(this);
    // remove attached data
    jQuery.removeData(this);
  });
  // remove the element (if it 's in the DOM)
 
  if (this.parentNode) {
    this.parentNode.removeChild(this);

  // if it is IE, you will need to set the outerHTML as well
    if (typeof this.outerHTML !== "undefined")
      this.outerHTML = "";
  
  }
}