Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

Removing and Adding Items from a list with JQUERY

Posted on 2007-11-14
5
Medium Priority
?
21,777 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 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

What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

648 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