Solved

Removing and Adding Items from a list with JQUERY

Posted on 2007-11-14
5
21,738 Views
Last Modified: 2013-11-19
Hi,

I'm starting out with JQUERY by building this sample app.

http://82.165.250.104/Sandbox/jenni/jquery_playlist.htm

The help I need is

1) The REMOVE function only works on the 1st item - as I add stuff I can't remove it.
2) How can i examine the order of items and save it? Basically I need to loop through each div and get the "Id" and build a delimited string.

Here is the code I have so far; please tell me if I am doing anything the wrong way. Thanks!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jquery test</title>
    <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
</head>
<body>


<script type="text/javascript">

$(document).ready(function(){
   
    // add item
    $("#add").click(function(id){
        $("#container").prepend("<div class=\"item\" id=\""+id+"\"><span class=\"close\">Close Me</span></div>");
    });
   
   // clear list
   $("#clear").click(function(){
        $("#container").html("");
    });
   
   // remove item
   $(".item").click(function(e) {
    $(this).remove();
   });    
   
   // save list
   $("#save").click(function(){
        var ids;
        $('#container div.child').each(function() { ids += $(this).attr('id') });
        alert(ids);
    });
});
</script>

<div id="container">

    <div class="item" id="itm001">
        <span class="close">Close Me</span>
    </div>

</div>


<a href="#" id="add">Add Item</a>
<a href="#" id="clear">Clear List</a>
<a href="#" id="save">Save List</a>


</body>
</html>


Thanks.

Here is the code:
0
Comment
Question by:JenniQ
  • 2
5 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 125 total points
ID: 20305817
Once the page loads, the ready() function is executed. In it the following is executed.
// remove item
   $(".item").click(function(e) {  $(this).remove(); });  

which simply search for all items with an "item" class, and attaches a function to every element. The attached function in return calls the remove function. This attached function is valid only for the elements that exist at the moment the function is called.

In your case, once you are creating the "item" elements dynamically, but are not "attaching" the "remove()" function so that it gets triggered when the user clicks on the new item. Modify your $('#add') as follows:

    // add item
    $("#add").click(function(id){
       // add an item
        $("#container").prepend("<div class=\"item\" id=\""+id+"\"><span class=\"close\">Close Me</span></div>");
  //register an onclick event to remove the item
  $(".item").click(function(e) {
    $(this).remove();
   });
0
 
LVL 82

Expert Comment

by:hielo
ID: 20553637
I object!  The code I provided worked correctly. It is only fair that I be compensated for the time invested.
0
 
LVL 1

Expert Comment

by:modus_operandi
ID: 20588033
Force accepted.
modus_operandi
EE Moderator
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question