Issue 214: removing a node leaves empty space
Status:  Verified
Owner: ----
Closed:  Aug 2011
Reported by DeskU...@gmail.com, Jul 4, 2011
What steps will reproduce the problem?
1. Create a parent node with only one child
2. remove the child node

(If possible, please attach an example HTML file, that works when copied
into the dynatree/doc/ folder.)

<!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 runat="server">
    <title></title>
	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css">
	<script src="sample.js" type="text/javascript"></script>
    <script  type="text/javascript">
        $(function () 
	{
            $("#Div1").dynatree(

            {

                children: 
		[
                // Pass an array of nodes.                
                   {title: "Item 2", key: "2" },
                   { title: "Item 1", key: "3"

                       ,children:
                        [
                                     
                            { title: "Item 12", key: "12" }
 
                       ]
                    }
                    ,

                    { title: "Item 4", key: "4" }
                ]

            }

        	);
        });


        function addTest() {         

                var tree = $("#Div1").dynatree("getTree");
                var activeNode = tree.getActiveNode();
                activeNode.addChild({ title: "new", key: "88" + Math.random() });
               
            }

            function removeTest() {
                var tree = $("#Div1").dynatree("getTree");
                var activeNode = tree.getActiveNode();
                activeNode.removeChildren() 

                activeNode.remove();
                
            }

            function add()
            {
                var f = function(){addTest();};
                setTimeout(f,0);
            
            }

             function remove()
            {
                var f = function(){removeTest();};
                setTimeout(f,0);
            
            }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
     <div id="Div1" >
     

    </div>

    <button onclick="add()" >Add Node</button>


    <button onclick="remove()">Delete Node</button>
    </div>

       </form>
</body>
</html>


What is the expected output? What do you see instead?

After all the child nodes are removed a space is left where the last child node was.

Happens only in ie. 
The UL elelment that is left empty for some reason still occupies space.

What version of the product are you using?
On what operating system and browser?


Internt Explorer7 windows XP

Jul 5, 2011
Project Member #1 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Labels: Milestone-Release1.2
Jul 5, 2011
Project Member #2 moo...@wwwendt.de
I copied your code inti a html file, but it doesn't run.
Can you reproduce it here:
    http://jsfiddle.net/mar10/xj5au/
([Fork] - Modify code - [Update] - [Share])

Jul 5, 2011
Project Member #3 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Waiting
Aug 16, 2011
Project Member #4 moo...@wwwendt.de
No answer - closing
Status: Done
Feb 16, 2012
#5 raghu.va...@gmail.com
http://jsfiddle.net/xj5au/84/
open in IE7 and remove nodes under folder2 by clicking button2. after removing last second subnode empty space is visible 
Jul 17, 2012
Project Member #6 moo...@wwwendt.de
considered verified
Jul 17, 2012
Project Member #7 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Verified
Nov 30, 2013
#8 mishramu...@gmail.com
$("#btnAddCode").click(function () {
                // Sample: add an hierarchic branch using code.
                // This is how we would add tree nodes programatically
                var rootNode = $("#tree").dynatree("getRoot");
                var childNode = rootNode.addChild({
                    title: "New Class",
                    tooltip: "This folder and all child nodes were added programmatically.",
                    isFolder: false
                });
                childNode.addChild({
                    title: "New Division",
                    icon: "customdoc1.gif"
                });
            });
May 19, 2014
#9 d.fische...@gmail.com
I am having the same problem in IE9 in compatibility mode on Win7 with lates version of dynatree(1.2.6). Solved this by toggling expansion state of parent node before and after node.remove(). Works perfecly finde for me.