View Full Version : Dynamically added div's not removing correctly in IE

Jun 3rd, 2010, 07:04 AM
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.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="box.js"></script>
<link rel="stylesheet" type="text/css" href="box.css">
<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>
<input type="button" value="Add Box" onClick="addBox()">


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;


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'

n = n+1;

function removeBox(id) {

boxdiv = document.getElementById("box_inner");
olddiv = document.getElementById(id);

Jun 3rd, 2010, 09:53 AM
newdiv.innerHTML = "Sample text<br><input type='button' value='Remove Box'

Remove the line break from the above line and then change
newdiv.setAttribute("class", "box"); to
newdiv.className= "box";

Jun 4th, 2010, 12:17 AM
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.