JQuery -- add remove list item

[williamrouse]

• 
  
• List 1
  
• List 2
  
• List 3
  
• List 4
  

Add List Item


Remove List Item

• 
  
• List 1
  
• List 2
  
• List 3
  
• List 4
  

[monkeysaurus]

• 
  
• List 1
  
• List 2
  
• List 3
  
• List 4
  

Add List Item


Remove List Item

• 
  
• List 1
  
• List 2
  
• List 3
  
• List 4
  

[williamrouse]

Yep! That's it. Thanks!

Edited February 28, 2009 by williamrouse

[k1d]

what should I do if I have two ordered list or more?? I try it but it doesn't work. Can somebody help me?

[falkencreative]

You'd probably need to duplicate the jquery as shown below, but use different variable names and id names for #remove and #add, and your list:

 

>    $(function(){
       var i=$('ul#loc li').size() + 1;

       $('a#add').click(function(){
           $('</pre>
<li> List ' + i + '</li>').appendTo('ul#loc');<br>           i++;<br>       });<br><br>       $('a#remove').click(function(){ <br>           $('ul#loc li:last').remove();<br>           i--;<br>       });<br>   })

[k1d]

Can I find another way to not duplicate it?? if I have ten ordered list so I have to make ten another script. It's very confusing...

[k1d]

ohh.. I forget to ask this. Why jquery just work for one id??

[falkencreative]

I found a partial solution... Perhaps Monkeysaurus will be able to tweak it to get it working.

 

Basically, this same assumes that your add/remove links are in the last

in the unordered list. The jquery then looks for the previous

and removes it (if remove is clicked) or adds one (if add is clicked.) Unfortunately, the current jquery adds the

within the previous li (not outside the closing

tag)... not exactly what I wanted.

 

Still, in case it helps:

 

>


title

 

<br />    $(function(){<br /><br />        $('a.add').click(function(){<br />            $(this).closest("li").prev("li").append("<li>test");<br />        });<br /><br />        $('a.remove').click(function(event){ <br />            $(this).closest("li").prev("li").remove();<br />        });<br /><br />    });<br /><br />    




</pre>
<ul id="loc">
List 1 
List 2 
List 3 
List 4 
 Remove List Item  |  Add List Item 
</ul>
<br><br><ul>

List 1 
List 2 
List 3 
List 4 
</ul>
<br><br

[BeeDev]

Or you can use .each():

$("a.add").each(function(counter){
   $(this).click(function(){
       $("ul:eq("+counter+") li").append("New one");
   });
});

Edited October 21, 2009 by BeeDev