In one of the pages in my application, I need to create several table rows using JavaScript and provide users the ability to remove certain rows. I am using removeChild to remove the rows from the table. This works in Firefox and Opera but not IE. What can I do to make it work in IE?
I have reproduced a simple JavaScript block that behaves the same way. Any help will be appreciated.
<html>
<head><title></title></head>
<body>
<div id="block"></div>
<script type="text/javascript">
function Initialize()
{
var element = document.getElementById('block');
for (i = 1; i < 6; i++)
{
var e = document.createElement('div');
e.setAttribute('id', 'element' + i);
e.innerHTML = 'Option ' + i;
var l = document.createElement('a');
l.setAttribute('href', '#');
l.setAttribute('onclick', 'RemoveMe(' + i + ');');
l.innerHTML = ' remove';
e.appendChild(l);
element.appendChild(e);
}
}
function RemoveMe(id)
{
var elementid = 'element' + id;
var element = document.getElementById(elementid);
element.parentNode.removeChild(element);
}
Initialize();
</script>
</body>
</html>
That won’t work, since the value of i will always be 6.
Instead, you can find the target element from the Event object that is passed to the event handler (using the .target property in Opera/Firefox/Safari or the .srcElement property in IE).