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.

Code:

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

Code:

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.

Code:

n = n+1;

This language protects you from having to mention an operand twice:

Code:

n ++;

/* or */

n += 1;

**gymnerd** · 06-09-2010, 01:21 AM

Ok, thanks for the advice. My problem still persists though.

Thread: Dynamically added div's not removing correctly in IE

Thread Tools

Search Thread

Dynamically added div's not removing correctly in IE

Bookmarks

Bookmarks

Posting Permissions