[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adding & Removing Nodes in JavaScript

Posted on 2009-04-22
5
Medium Priority
?
459 Views
Last Modified: 2012-05-06
HI there,

I am using this code to generate <a> nodes that remove themselves when clicked. However I can't seemt o get the removeNode fucntion to work, Firebug shows the error I am reciving as

uncaught exception: Node was not found (NS_ERROR_DOM_NOT_FOUND_ERR)
[Break on this error] docBody.removeChild(node);

Can anyone point me in the right direction?
function addNode(id) {
	var inText = document.getElementById(id).innerHTML;
	var newText = document.createTextNode(inText);
 
	var newContact = document.createElement("a");
	newContact.setAttribute('id',id); 
 
	newContact.appendChild(newText);
	
	newContact.setAttribute('href','#'); 
	newContact.setAttribute('onclick','removeNode('+id+')'); 
	+
 
	var docBody = document.getElementById("contactlist");
	docBody.appendChild(newContact);
 
	document.getElementById('livesearch').style.display = 'none';
	document.getElementById('txt1').value = '';
 
	return false;
}
	
function removeNode(id)
{
	var docBody = document.getElementById("contactlist");
	var node = document.getElementById(id);
	docBody.removeChild(node);
	
}

Open in new window

0
Comment
Question by:wellso
  • 2
  • 2
5 Comments
 
LVL 9

Expert Comment

by:dan_neal
ID: 24204092
Try this:
function addNode(id) {
	var inText = document.getElementById(id).innerHTML;
	var newText = document.createTextNode(inText);
 
	var newContact = document.createElement("a");
	newContact.setAttribute('id',id); 
 
	newContact.appendChild(newText);
	
	newContact.setAttribute('href','#'); 
	newContact.setAttribute('onclick','removeNode('+id+')'); 
	+
 
	var docBody = document.getElementById("contactlist");
	docBody.appendChild(newContact);
 
	document.getElementById('livesearch').style.display = 'none';
	document.getElementById('txt1').value = '';
 
	return false;
}
	
function removeNode(id)
{
//	var docBody = document.getElementById("contactlist");
//	var node = document.getElementById(id);
//	docBody.removeChild(node);
         document.getElementById(id).removeNode(true);
	
}

Open in new window

0
 
LVL 2

Author Comment

by:wellso
ID: 24204179
FIrebug is returning

document.getElementById(id).removeNode is not a function

maybe because of a name conflict with what i have called the fucntion?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24204482
It wouldn't be a function if the result of document.getElementById(id) is null (i.e., element is not found).
0
 
LVL 9

Accepted Solution

by:
dan_neal earned 2000 total points
ID: 24204545
AHHH!!! New idea.  The removeChild seems to be the right method but could be using the wrong means.  I know this seems to be what you were doing but it may be a matter of DOM handling.  Getting the .parentNode of the actual element you want to remove helps to ensure you have the right node.

function addNode(id) {
	var inText = document.getElementById(id).innerHTML;
	var newText = document.createTextNode(inText);
 
	var newContact = document.createElement("a");
	newContact.setAttribute('id',id); 
 
	newContact.appendChild(newText);
	
	newContact.setAttribute('href','#'); 
	newContact.setAttribute('onclick','removeNode('+id+')'); 
	+
 
	var docBody = document.getElementById("contactlist");
	docBody.appendChild(newContact);
 
	document.getElementById('livesearch').style.display = 'none';
	document.getElementById('txt1').value = '';
 
	return false;
}
	
function removeNode(id)
{
         //Get a reference to the parentNode of the clicked object.
	var docBody = document.getElementById(id).parentNode;
         //Get a reference to the object itself
	var node = document.getElementById(id);
         //Use the removeChild method on the parentNode object.
	docBody.removeChild(node);
	
}

Open in new window

0
 
LVL 2

Author Closing Comment

by:wellso
ID: 31573243
Thanks, that worked great, think Mozilla wasnt liking the removeNode method.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses
Course of the Month19 days, 22 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question