PDA

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



gymnerd
06-03-2010, 06: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.

HTML:

<!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:

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:

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);
}

abduraooft
06-03-2010, 08:53 AM
newdiv.innerHTML = "Sample text<br><input type='button' value='Remove Box'

onClick='removeBox("+num+")'>";
Remove the line break from the above line and then change
newdiv.setAttribute("class", "box"); to
newdiv.className= "box";

gymnerd
06-03-2010, 11:17 PM
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.