...

View Full Version : Need a little DOM help (adding and removing items in a list)



CitznFish
04-06-2006, 09:53 PM
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!




<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>

CitznFish
04-10-2006, 12:07 AM
Found a solution:

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


modified it to better fit my needs.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum