PDA

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



gymnerd
06-04-2010, 08:24 PM
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 code works as it should in FF/Chrome, but I just can't get it to work correctly in IE.

I can get it to recreate the problem 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 then disappears.

Any help would be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Boxes</title>
<style type="text/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;
}
</style>
<script type="text/javascript">
n = 0;

function addBox() {

num = n.value;
boxdiv = document.getElementById("box_inner");
newdiv = document.createElement("div");
newdiv.setAttribute("id", num);
newdiv.className = "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);
}
</script>
</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>

clueful
06-07-2010, 11:37 AM
function addBox() {

num = n.value;
...

Where does n get a .value property? This will create multiple elements with ID 'undefined'.
Also don't allow an ID to begin with a digit.




n = n+1;This language protects you from having to mention an operand twice:
n ++;

/* or */

n += 1;

gymnerd
06-09-2010, 01:21 AM
Ok, thanks for the advice. My problem still persists though.