Deleting Items From <li>

[ameliabob]

I have a function that calls AddProfileNameToMenu (in this case it added "aaa" and "WhatIf") to a list

    function AddProfileNameToMenu(newName){        var el, L;        el = document.createElement("li");        el.setAttribute("id",newName);        L = document.createElement("a");        L.appendChild(document.createTextNode(newName));        L.href = "java script:void(0)";        L.onclick = function(e) {            e = (e)?e:window.event;            A = (e.srcElement)?e.srcElement:e.target;            ChgProfile(A.parentNode.getAttribute("id"))        }        el.appendChild(L);        document.getElementById("Profiles").appendChild(el);       }

Now, later, after the first function is done, if the user want to delete one of this items I am trying the following code and I get the error that "y is null". I am getting confused.

    function Localtest(){          var x=document.getElementById("Profiles");          alert(x.innerHTML);        var y = document.getElementById("WhatIf");        var container = y.parentNode;        container.removeChild(y);        z=document.getElementById("Profiles");          alert("second time " + z.innerHTML);    }

I can see this from the alert(x.innerHTML): <li id="aaa"><a href="java script:void(0)">aaa</a></li><li id="WhatIf "><a href="java script:void(0)">WhatIf </a></li>

[jeffman]

I used this variation on your code, and it all worked in FF3 and IE7:

function AddProfileNameToMenu(newName){	var el, L;	el = document.createElement("li");	el.setAttribute("id",newName);	L = document.createElement("a");	L.appendChild(document.createTextNode(newName));	L.href = "java script:void(0)";	el.appendChild(L);	document.getElementById("Profiles").appendChild(el);}function init () {	AddProfileNameToMenu("test1")	AddProfileNameToMenu("test2")	alert (document.getElementById("test1").nodeName);}window.onload = init;-----<ul id="Profiles"></ul>

FWIW, Mozilla's documentation (which applies beyond Mozilla) says that setAttribute() is inconsistent, and they recommend accessing properties directly, as in el.id = newNameWhat's your browser?

[ameliabob]

I am using Mozilla but also need to test for IE. But it is the next step that I was having problems with. How do I delete one of the ones that I have Added in.

[jeffman]

I checked that too. It works. The problem in your original was that this statement seems not to be returning anything: var y = document.getElementById("WhatIf"); The last statement in MY test shows that your code SHOULD return something, since it did not generate the same error for me. I didn't even retype your code. The parts that stayed the same are just copy/paste. So the problem isn't a typo. Is this an EXACT copy of what you see in your alert?

<li id="aaa"><a href="java script:void(0)">aaa</a></li><li id="WhatIf "><a href="java script:void(0)">WhatIf </a></li>

If so, I'm noticing what seems to be 1-2 linebreaks immediately after the word WhatIf, like maybe you are passing something like this to the id: "WhatIf\n" . Are you hard-coding those words the way I did, or did you grab them out of a text area? Is it possible a line break is coming with them? That would be simple enough to fix.

[ameliabob]

You are right. There is a line feed there. Somewhere when I gave an 'echo' on the server and the myRequest.responseText on the browser a line feed got inserted. It wasn't there when it left but was when I got it. Anyway thanks for the help.