Removing and Adding Items from a list with JQUERY

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:
LVL 3
JenniQAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
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
 
hieloCommented:
I object!  The code I provided worked correctly. It is only fair that I be compensated for the time invested.
0
 
modus_operandiCommented:
Force accepted.
modus_operandi
EE Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.