Solved

Removing and Adding Items from a list with JQUERY

Posted on 2007-11-14
5
21,734 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now