Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Help with removing child nodes

    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
    Helping to build a bigger box. - Adam Matthews

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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
    Last edited by Basscyst; 01-30-2005 at 05:51 AM.
    Helping to build a bigger box. - Adam Matthews

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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&#58;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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'));}

    .....Willy

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Okay, I gotcha. I wasn't sure if adding more than one tbody was good practice. I'll do it that way.

    Thanks,
    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •