Help with removing child nodes

Basscyst · 01-29-2005, 11:37 PM

I need to allow the user to remove optional payments, once added if necessary. I have it working for the most part but when the nodes are removed, their parent <tr> element still remains, how can specify to remove the entire <tr> element based on the row that was clicked.

Code:

<script type="text/javascript">

function fillSelects()  //fill date drop downs for payments recieved
{
	var sel=document.getElementsByTagName('select');
	for(var i=0;i<sel.length;i++)
	{
		if(sel[i].length==0)  //only fill them if they are empty
		{
			switch(sel[i].className)
			{
				case 'mo':  //fill months
					for(var j=0;j<12;j++)
					{
						var k=j+1;
						sel[i].options[j]=new Option(k,k);
					}
				break;
				
				case 'dy':  //fill days
					for(var j=0;j<31;j++)
					{
						var k=j+1;
						sel[i].options[j]=new Option(k,k);
					}
				break;
	
				case 'yr':  //fill years
					var now=new Date();
					var yr=now.getYear();
					var l=yr-1991;
					for(var j=0;j<l+1;j++)
					{
						var k=1991+j;
						sel[i].options[j]=new Option(k,k);
					}
				break;
			}
		}
	}
}

function addPayment() //Add an additional payment to form
{
	var tr=document.createElement('tr'); //create form elements and text
	var td1=document.createElement('td');
	var td2=document.createElement('td');
	var td3=document.createElement('td');
	var txt=document.createElement('input');
	var mo=document.createElement('select');
	var yr=document.createElement('select');
	var dy=document.createElement('select');
	var str1=document.createTextNode(' / ');
	var str2=document.createTextNode(' / ');
	var a=document.createElement('a');
	a.setAttribute('href','#');
	a.onclick=function(){clearNodes(this.parentNode.parentNode);}
	var img=document.createElement('img');
	img.src='x.gif';
	mo.className="mo";  //define element attributes
	yr.className="yr";
	dy.className="dy";
	txt.type='text';
	txt.className='payment';
	td1.appendChild(txt); //concatenate created elements
	td2.appendChild(mo);
	td2.appendChild(str1);
	td2.appendChild(dy);
	td2.appendChild(str2);
	td2.appendChild(yr);
	td3.appendChild(a);
	td3.lastChild.appendChild(img);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	document.getElementById('tbl1').children[1].appendChild(tr);  //append new form elements to existing table
	fillSelects();  //fill date options with data
}

function clearNodes(obj)
{
	obj.removeChild(obj.childNodes[2]);
	obj.removeChild(obj.childNodes[1]);
	obj.removeChild(obj.childNodes[0]);
}

</script>
</head>
<body>
	<form id="frm2">
		<table id="tbl1">
			<thead>
				<th>Payments Recieved:</th><th><span><a href="#" onclick="addPayment();">Add Payment</a></span></th>
			</thead>
			<tbody>
				<tr>
					<td class="tdhd">Payment Amount</td>
					<td class="tdhd" colspan="2">Payment Date</td>
				</tr>
			</tbody>
		</table>
	</form>
</body>

Basscyst

Willy Duitt · 01-30-2005, 01:47 AM

Try creating a TBODY element... Append your table rows to that and the TBODY to the table... Then when you remove, back up another parentNode (the TBODY) and remove the table row, including data cells, from there...

.....Willy

Basscyst · 01-30-2005, 05:26 AM

Right, that's exactly what I'm trying to do, instead of replacing the <td>'s, replace the <tr>. There is a <tbody> in the html I am appending to. It's easy if I just want to delete the last record, and I guess I could just give the links ids, but is there a way for me to just return an objects placement within the parent node's nodes? In case they want to delete a record from the middle. I don't node. . . .

Basscyst

Willy Duitt · 01-30-2005, 05:53 AM

You can add as many TBODY's as you want... One for each table row you are adding and then go one parentNode further up the tree than you are currently doing in order to remove the table row the element you are removing is in....

Granted... I do not know what affect a gazillion empty TBODY's may have if a user sits there adding and deleting multiple elements but I would assume it would not hurt anything and you should not need to worry about the space a table row, albiet an empty one, will take on the page... Worse come to worse, I suppose you could check for empty TBODY's and delete those...

FWIW: Here is a snippet run as a Bookmarklet or from the addressbar which will show the TBODY's... even those added by the browser by default when the TBODY is missing...

javascript:var%20o=document.documentElement,p,w=window.open('','_blank'),d=w.document;d.write('<html ><body><pre>');z('<'+o.tagName);for(var%20i=0;p=o.attributes[i],i!=o.attributes.length;i++)if(p.specified)z('%20'+p.nodeName+'="'+p.nodeValue+'"');z('>'+o.innerHTM L+'</'+o.tagName+'>');d.write('</pre></body></html>');d.close();function%20z(s){d.write(s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'));}

.....Willy

Basscyst · 01-31-2005, 01:20 AM

Okay, I gotcha. I wasn't sure if adding more than one tbody was good practice. I'll do it that way.

Thanks,
Basscyst