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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Southern California
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Southern California
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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