• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 21797
  • Last Modified:

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:
0
JenniQ
Asked:
JenniQ
  • 2
1 Solution
 
hieloCommented:
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now