如何清空某结点下的所有内容？

比如
<div id="div1">
   <div onclick="alert('1')">1</div>
   <div onclick="alert('2')">2</div>
   <div onclick="alert('3')">3</div>
   <div><input type="button" value="click me"></div>
   ...
</div>div1中有很多儿子，还有孙子，然后子节点上还会有事件。我现在要清空div1，是否就是用$("div1").innerHTML=""；这样会不会引起内存泄露，或者有什么垃圾回收的问题？
如何清空div1比较妥当？

解决方案 »

  1.   

    就算用递归向下removeChild，只要有对其儿子或孙子的引用存在，还是可能出现内存泄露的。换个思路，隐藏起来如何？以后还是可以复用的
      

  2.   

    /**
     * 遍历某一元素节点及其所有后代元素
     *
     * @param Elem node  所要清除的元素节点
     * @param function func  进行处理的函数
     * 
     */
    function walkTheDOM(node, func) {
        func(node); 
        node = node.firstChild; 
        while (node) { 
            walkTheDOM(node, func); 
            node = node.nextSibling; 
        } 
    } 
    /**
     * 清除dom节点的所有引用，防止内存泄露
     *
     * @param Elem node  所要清除的元素节点
     * 
     */
    function purgeEventHandlers(node) {
        walkTheDOM(node, function (e) {
            for (var n in e) {            
                if (typeof e[n] === 
                        'function') {
                    e[n] = null;
                }
            }
        });
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js测试</title>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(document).ready(function(){
       $("#btn").toggle(function(){
       $("#div1").hide();
       $("#btn").attr("value","显示");
       },function(){
           $("#div1").show();
        $("#btn").attr("value","隐藏");
       });
    });
    </script>
    </head>
    <body>
    <div id="div1">
        <div onclick="alert('1')">1</div>
        <div onclick="alert('2')">2</div>
        <div onclick="alert('3')">3</div>
        <div><input type="button" value="click me"></div>
    </div>
    <input type="button" value="隐藏" id="btn">
    </body>
    </html>
    用一下jquery
      

  4.   

    没考虑过这个问题觉得因为不是CS，即使是AJAX用户停留在一个页面的时间都不会太久一旦刷新页面，什么都没了
      

  5.   

    DOM中删除父节点则相应的子节点也一并被移除。
      

  6.   

    2楼的函数在Firefox中将会发生异常，没有做节点类型的判断
      

  7.   

    直接jQuery清空~
    $("#div1").empty();
      

  8.   

    this.parentNode.parentNode.removeChild(this.parentNode.childNodes)
      

  9.   

    .innerHTML="";留存泄漏跟这个没什么关系...关键是其它部分代码没有胡写...
      

  10.   

    不能，的手工进行清除
    ECMAScript 拥有无用存储单元收集程序（garbage collection routine），意味着不必专门销毁对象来释放内存。当再没有对对象的引用时，称该对象被废除（dereference）了。运行无用存储单元收集程序时，所有废除的对象都被销毁。每当函数执行完它的代码，无用存储单元收集程序都会运行，释放所有的局部变量，还有在一些其他不可预知的情况下，无用存储单元收集程序也会运行。
    注意：废除对象的所有引用时要当心。如果一个对象有两个或更多引用，则要正确废除该对象，必须将其所有引用都设置为 null。可以参考下http://www.w3school.com.cn/js/pro_js_object_working_with.asp