Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically added div's not removing correctly in IE

    This is my first post here, I've resorted to asking for help after wasting several hours getting nowhere.

    So, on to the problem. I have a containing div that holds another div that is to hold all the separate divs dynamically appended and removed. Sometimes, in IE 8, if I remove one of the divs, I lose some of the styling for some reason. If I select any text on the page, however, it goes away suddenly. My codes works as it should in FF/Chrome, but I just can't get it to work correctly in IE.

    Any help would be greatly appreciated.

    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<script type="text/javascript" src="box.js"></script>
    	<link rel="stylesheet" type="text/css" href="box.css">
    </head>
    <body>
    	<div id="box_outer">
    	<div id="box_inner">
    	<div class="box" id="box1">Sample text<br><input type="button" value="Remove Box" onClick="removeBox('box1')"></div><div class="box" id="box2">Sample text<br><input type="button" value="Remove Box" onClick="removeBox('box2')"></div>
    	</div>
    	<input type="button" value="Add Box" onClick="addBox()">
    	</div>
    </body>
    </html>
    CSS:
    Code:
    body {
    
    	font-family: Arial, Verdana, sans-serif;
    	font-size: 12px;
    }
    
    #box_outer {
    
    	width: 40em;
    	background: #DDDDDD;
    	padding: 1em;
    }
    
    .box {
    
    	background: #FFFFFF;
    	margin: 1em;
    	padding: 1em;
    }
    JavaScript:
    Code:
    n = 0;
    
    function addBox() {
    
    	num = n.value;
    	boxdiv = document.getElementById("box_inner");
    	newdiv = document.createElement("div");
    	newdiv.setAttribute("id", num);
    	newdiv.setAttribute("class", "box");
    	newdiv.innerHTML = "Sample text<br><input type='button' value='Remove Box' 
    
    onClick='removeBox("+num+")'>";
    	boxdiv.appendChild(newdiv);
    	n = n+1;
    }
    
    function removeBox(id) {
    
    	boxdiv = document.getElementById("box_inner");
    	olddiv = document.getElementById(id);
    	boxdiv.removeChild(olddiv);
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    newdiv.innerHTML = "Sample text<br><input type='button' value='Remove Box'

    o
    nClick='removeBox("+num+")'>";
    Remove the line break from the above line and then change
    Code:
    newdiv.setAttribute("class", "box");
    to
    Code:
    newdiv.className= "box";
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The line break was just an error that happened with copying it here, my bad. And I changed the newdiv attribute but I'm still getting the same behavior in IE.

    If I add a box, then remove the second box that was already there, the padding between the two remaining boxes and the "Add Box" button disappears.

    Thanks for the help though.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •