Go Back   CodingForums.com > :: Client side development > JavaScript programming > DOM and JSON scripting
Reload this Page Need a little DOM help (adding and removing items in a list)

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-06-2006, 08:53 PM   PM User | #1
CitznFish
Regular Coder

 
Join Date: Nov 2002
Location: Southern California
Posts: 110
Thanks: 0
Thanked 0 Times in 0 Posts
CitznFish is an unknown quantity at this point
Unhappy Need a little DOM help (adding and removing items in a list)
Currently I am trying to add items in a list, then having the ability to delete individual items from that list.

Currently I can click on an item and it will show a DIV that contains sub items. Clicking on one of these sub items then adds it to a third column. (a table written out in DOM )

I am counting how many items are being placed in the third column, and limiting it to 10

I have no idea how to go about removing an item when I click on the delete image (a broken image if you look at this code in HTML) from the DOM table and after I remove one, how to remove a second item..

Any help would be appreciated. I'm not that familiar with this, and I've tried many things, none of which seem to work. I can't even get an alert to tell me a unique identifier for each line in teh 3rd column.


TIA!



Code:
<script>
	function show_div(div_id) {
    // hide all the divs
    document.getElementById('box3').style.display = 'none';
    document.getElementById('box4').style.display = 'none';
    document.getElementById('box5').style.display = 'none';
    document.getElementById('box6').style.display = 'none';
    document.getElementById('box7').style.display = 'none';
    document.getElementById('box8').style.display = 'none';
    document.getElementById('box9').style.display = 'none';
    document.getElementById('box10').style.display = 'none';
    document.getElementById('box11').style.display = 'none';
    document.getElementById('box12').style.display = 'none';
	document.getElementById('box13').style.display = 'none';

    // show the requested div
    document.getElementById(div_id).style.display = 'block';
	}
	
</script>

<form>
<img src="" width="294" height="44"><br>
<table width="294" cellpadding="0" cellspacing="0" border="0" class="adviceSaveTable">
	<tr><td width="294" height="40" class="adviceSavedPop" valign="top" align="left" colspan="3"><div class="adviceSavedPop2"><a href="javascript: expandCollapse('advicethankspop');"><img src="images/0306_misc_x_close.gif" class="adviceSavedClose" width="14" height="14" alt="close popup" title="close popup" border="0"></a><div class="adviceSavedPop4">my page</div></div><div class="adviceSaveIntro"></div></td></tr>
	<tr><td width="16"><img src="images/spacer.gif" width="16" height="1" border="0"></td>
		<td width="260">
<table width="260" cellpadding="0" cellspacing="0" border="0">
	<tr><td width="117" colspan="3"><img src="images/0306_popup_save-site_top_l.gif" width="117" height="5" alt="" border="0"></td>
		<td width="18"><img src="images/spacer.gif" width="18" height="1" border="0"></td>
		<td width="125" colspan="3"><img src="images/0306_popup_save-site_top_r.gif" width="125" height="5" alt="" border="0"></td></tr>
	<tr><td width="1" bgcolor="#b3c4d4"><img src="images/spacer.gif" width="1" height="1" border="0"></td>
		<td width="115" height="254" valign="top" class="adviceSavePopLeft">
		<div class="box1">
		<div class="box2">
<a href="#" onclick="show_div('box3'); return false;">coupons &amp; deals</a>
<a href="#" onclick="show_div('box4'); return false;">travel</a>
<a href="#" onclick="show_div('box5'); return false;">health &amp; wellness</a>
<a href="#" onclick="show_div('box6'); return false;">education</a>
<a href="#" onclick="show_div('box7'); return false;">entertainment</a>
<a href="#" onclick="show_div('box8'); return false;">home &amp; garden</a>
<a href="#" onclick="show_div('box9'); return false;">parenting</a>
<a href="#" onclick="show_div('box10'); return false;">family finance</a>
<a href="#" onclick="show_div('box11'); return false;">recipes</a>
<a href="#" onclick="show_div('box12'); return false;">hobbies &amp; recreation</a>
		</div>
		</div>
</td>
		<td width="1" bgcolor="#b3c4d4"><img src="images/spacer.gif" width="1" height="1" border="0"></td>
		<td width="18" valign="top">
	<script type="text/javascript">

var TRCount = 0;
var c0;

function insertTR() {

if(TRCount >= 10){
alert("You cannot select more than 10 items, please delete one before selecting another")
}
else
{
var newTD = document.createElement('td');
var newText = document.createTextNode((c0) + (TRCount++));
newTD.appendChild(newText);
var newerTD = document.createElement('td');
var newimg=document.createElement('img');
newimg.alt= "delete";
newimg.border = "0";
newimg.id = "rssFeed" + TRCount;
newimg.src = "images/0306_ico_circle_close.gif";
newimg.className="previewimage";
newimg.onclick=function()
{
deleteTR();
};
newerTD.appendChild(newimg);
var newTR = document.createElement('tr');
newTR.appendChild(newTD);
newTR.appendChild(newerTD);

var theTable = document.getElementById('wonka');
theTable.tBodies[0].appendChild(newTR);
}
}

function deleteTR(){
alert()

}
</script>		
<div class="floatOnTop">
<div style="display: none;" id="box3" class="box3container">
<div class="box3">

<div onclick='javascript:insertTR(c0="coupons & deals");'><a href="#">coupons & deals</a></div>
<div onclick='javascript:insertTR(c0="grocery coupons & deals");'><a href="#">grocery coupons &amp; deals</a></div>
<div onclick='javascript:insertTR(c0="deals");'><a href="#">deals</a></div>
</div><div id="box3shadow">	</div>
</div>

<div style="display: none;" id="box4" class="box4container">
<div class="box4">
<div onclick='javascript:insertTR(c0="travel");'><a href="#">travel</a></div>
<div onclick='javascript:insertTR(c0="travel stories");'><a href="#">travel stories</a></div>
<div onclick='javascript:insertTR(c0="travel deals");'><a href="#">travel deals</a></div>
<div onclick='javascript:insertTR(c0="camping & national parks");'><a href="#">camping &amp; national parks</a></div>
</div><div id="box4shadow">	</div>
</div>

<div style="display: none;" id="box5" class="box5container">
<div class="box5">
<div onclick='javascript:insertTR(c0="health & wellness");'><a href="#">health &amp; wellness</a></div>
<div onclick='javascript:insertTR(c0="women`s health");'><a href="#">women's health</a></div>
<div onclick='javascript:insertTR(c0="child`s health");'><a href="#">child's health</a></div>
<div onclick='javascript:insertTR(c0="men`s health");'><a href="#">men's health</a></div>
<div onclick='javascript:insertTR(c0="senior health");'><a href="#">senior health</a></div>
<div onclick='javascript:insertTR(c0="diet & fitness");'><a href="#">diet &amp; fitness</a></div>
</div><div id="box5shadow">	</div>
</div>

<div style="display: none;" id="box6" class="box6container">
<div class="box6">
<div onclick='javascript:insertTR(c0="education");'><a href="#">education</a></div>
<div onclick='javascript:insertTR(c0="homework help");'><a href="#">homework help</a></div>
<div onclick='javascript:insertTR(c0="school finder");'><a href="#">school finder</a></div>
</div><div id="box6shadow">	</div>
</div>

<div style="display: none;" id="box7" class="box7container">
<div class="box7">
<div onclick='javascript:insertTR(c0="entertainment");'><a href="#">entertainment</a></div>
<div onclick='javascript:insertTR(c0="movies, tv, & music");'><a href="#">movies, tv, &amp; music</a></div>
<div onclick='javascript:insertTR(c0="gossip & horoscopes");'><a href="#">gossip &amp; horoscopes</a></div>
</div><div id="box7shadow">	</div>
</div>

<div style="display: none;" id="box8" class="box8container">
<div class="box8">
<div onclick='javascript:insertTR(c0="home & garden");'><a href="#">home &amp; garden</a></div>
</div><div id="box8shadow">	</div>
</div>

<div style="display: none;" id="box9" class="box9container">
<div class="box9">
<div onclick='javascript:insertTR(c0="parenting");'><a href="#">parenting</a></div>
<div onclick='javascript:insertTR(c0="pregnancy");'><a href="#">pregnancy</a></div>
<div onclick='javascript:insertTR(c0="babies");'><a href="#">babies</a></div>
<div onclick='javascript:insertTR(c0="toddlers & pre-school");'><a href="#">toddlers &amp; pre-school</a></div>
<div onclick='javascript:insertTR(c0="school age");'><a href="#">school age</a></div>
<div onclick='javascript:insertTR(c0="tweens & teens");'><a href="#">tweens &amp; teens</a></div>
</div><div id="box9shadow">	</div>
</div>

<div style="display: none;" id="box10" class="box10container">
<div class="box10">
<div onclick='javascript:insertTR(c0="family finance");'><a href="#">family finance</a></div>
</div><div id="box10shadow">	</div>
</div>

<div style="display: none;" id="box11" class="box11container">
<div class="box11">
<div onclick='javascript:insertTR(c0="recipes");'><a href="#">recipes</a></div>
<div onclick='javascript:insertTR(c0="cooking with kids");'><a href="#">cooking with kids</a></div>
<div onclick='javascript:insertTR(c0="healthy eating");'><a href="#">healthy eating</a></div>
<div onclick='javascript:insertTR(c0="entertaining solutions");'><a href="#">entertaining solutions</a></div>
</div><div id="box11shadow">	</div>
</div>


<div style="display: none;" id="box12" class="box12container">
<div class="box12">
<div onclick='javascript:insertTR(c0="hobbies & recreation");'><a href="#">hobbies &amp; recreation</a></div>
<div onclick='javascript:insertTR(c0="sports & recreation");'><a href="#">sports &amp; recreation</a></div>
<div onclick='javascript:insertTR(c0="crafts & hobbies");'><a href="#">crafts &amp; hobbies</a></div>
<div onclick='javascript:insertTR(c0="camps for kids");'><a href="#">camps for kids</a></div>
</div><div id="box12shadow">	</div>
</div>


<div style="display: none;" id="box13" class="box13">
</div>
</div>	
<img src="images/spacer.gif" width="18" height="1" border="0"></td>
		<td width="1" bgcolor="#b3c4d4"><img src="images/spacer.gif" width="1" height="1" border="0"></td>
		<td width="123" valign="top" class="adviceSavePopRight"><table cellpadding="0" cellspacing="0" border="1" id="wonka" class="adviceSaveSelected">
	<tbody>
	</tbody>
</table></td>
		<td width="1" bgcolor="#b3c4d4"><img src="images/spacer.gif" width="1" height="1" border="0"></td></tr>
	<tr><td width="117" colspan="3"><img src="images/0306_popup_save-site_bot_l.gif" width="117" height="5" alt="" border="0"></td>
		<td width="18"><img src="images/spacer.gif" width="18" height="1" border="0"></td>
		<td width="125" colspan="3"><img src="images/0306_popup_save-site_bot_r.gif" width="125" height="5" alt="" border="0"></td></tr>
</table><input type="image" src="images/0305_button_save.gif" class="adviceSaveButton" onclick="show_div('box13'); return false;" width="39" height="22" alt="save" title="save" border="0"></td>
		<td width="16"><img src="images/spacer.gif" width="16" height="1" border="0"></td></td></tr>
</table>
</form>
__________________
Everyone has the right to be stupid, some just abuse the privilege.
CitznFish is offline   Reply With Quote
Old 04-09-2006, 11:07 PM   PM User | #2
CitznFish
Regular Coder

 
Join Date: Nov 2002
Location: Southern California
Posts: 110
Thanks: 0
Thanked 0 Times in 0 Posts
CitznFish is an unknown quantity at this point
Found a solution:

http://www.mredkj.com/tutorials/tabledeleterow.html


modified it to better fit my needs.
__________________
Everyone has the right to be stupid, some just abuse the privilege.
CitznFish is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 03:59 PM.
Advertisement
Log in to turn off these ads.