Adding and removing a division using JavaScript

Question

<script type="text/javascript">
    var num=2;
    function addElement() 
    {
        var ni = document.getElementById('myDiv');
        var newdiv = document.createElement('div');
        var divIdName = 'my'+num+'Div';
        newdiv.setAttribute('id',divIdName);
        newdiv.innerHTML = 'Subject-' + num + '* :<input type="text" id=textbox"' + num + '"/><a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove</a>';
        ni.appendChild(newdiv);
        num=num+1;
    } 

    function removeElement(divNum) 
    {
        alert(divNum.id);
        var d = document.getElementById('myDiv');
        var dd =document.getElementById(divNum.id);
        d.removeChild(dd);    
        for(var i=0;i<d.childNodes.length;i++)
        {
            if(d.childNodes[i].id==divNum.id)
            {
                d.removeChild(d.childNodes[i]);    
            }
        }
    }
</script>

It is working fine in Internet Explorer but in Firefox it is giving error like the element my1Div is not defined. Why is this happening and how can it be corrected?

Thanks.

Answer 1

I haven't ran the code but I guess that you might be hitting DOM TextNodes, which don't have many of the methods that elements have defined. To work around this you can specifically check for text nodes using something like

if (d.childNodes[i].nodeName === "#text") continue;

Of course this might be the totally wrong solution. If you could edit your post and say which line is erroring that might help.

Answer 2

Change

newdiv.innerHTML = 'Subject-' + num + '* :<input type="text" id=textbox"' + num + '"/><a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove</a>';

to

newdiv.innerHTML = 'Subject-' + num + '* :<input type="text" id=textbox"' + num + '"/><a href=\'#\' onclick=\'removeElement("'+divIdName+'")\'>Remove</a>';

(add the " quotes)

and then change

var dd =document.getElementById(divNum.id);

to

var dd =document.getElementById(divNum);

(remove .id)

Answer 3

Your quotes are wrong in both the removeElement call and the textbox ID. This always happens when kludging HTML together from strings, especially JavaScript inside HTML inside JavaScript strings. That's too many levels of nesting for the mind to cope with. Use DOM methods instead.

Avoid setAttribute, it's less readable than normal DOM Level 1 HTML methods, and has many bugs in IE. removeElement is also a very odd way of saying d.parentNode.removeChild(d) twice — ineffectively, unless you have two elements with the same ID. (Which you shouldn't as it's quite invalid. If you did, it would fail for every other matching child as you are doing a destructive forward iteration.)

If you use a closure you could also lose all the nasty stuff with remembering which element is which, and replace the lot with:

function addElement() {
    var newdiv= document.createElement('div');
    newdiv.appendChild(document.createTextNode('Subject-' + num + '* :'));
    newdiv.appendChild(document.createElement('input'));
    newdiv.appendChild(document.createElement('a'));
    newdiv.lastChild.href='#';
    newdiv.lastChild.onclick= function() {
        newdiv.parentNode.removeChild(newdiv);
        return false;
    };
    newdiv.lastChild.appendChild(document.createTextNode('Remove'));
    document.getElementById('myDiv').appendChild(newdiv);
}