...

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



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

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, 09: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-04-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum