• Registered: 2008-12-23
  • Posts: 80

Topic: JQuery -- add remove list item

I was looking at the JQuery for absolute beginner instructional video where I was shown how to add and remove an item for an ordered list.  The demo assumed that you had one unordered list on a page.  I tried to create a demo where there are two unordered list on a page, but I only want to manipulate one with an ID of loc.  I was unsuccessful.  Please point me in the correct direction.   My code follows…

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href='css/default.css' rel='stylesheet' type='text/css' />
<script src="jquery-1.3.2.min.js" type="text/javascript"> </script>
 
    <script  type="text/javascript">
    $(function(){
        var i=$('li').size() + 1;
/*        console.log(i);  */
        $('a#add').click(function(){
            $('<li List >' + i + '</li>').appendTo('ul#loc');
            i++;
        });

        $('a#remove').click(function(){ 
            $('li:last').remove('ul#loc');
            i--;
        });
    });
    
    </script>
</head>
<body>
<ul id='loc'>
<li>List 1 </li>
<li>List 2 </li>
<li>List 3 </li>
<li>List 4 </li>
</ul>
<a href="#" id='add'> Add List Item </a>
<br />
<a href="#" id='remove'> Remove List Item </a>
<br />
<ul >
<li>List 1 </li>
<li>List 2 </li>
<li>List 3 </li>
<li>List 4 </li>
</ul>
</body>
</html>

Thanks!
WBR

  • Registered: 2008-12-19
  • Posts: 92

Re: JQuery -- add remove list item

Hi William,

I think you're trying to do the following:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href='css/default.css' rel='stylesheet' type='text/css' />
<script src="jquery-1.3.2.min.js" type="text/javascript"> </script>
 
    <script  type="text/javascript">
    $(function(){
        var i=$('ul#loc li').size() + 1;
        
        $('a#add').click(function(){
            $('<li> List ' + i + '</li>').appendTo('ul#loc');
            i++;
        });

        $('a#remove').click(function(){ 
            $('ul#loc li:last').remove();
            i--;
        });
    });
    
    </script>
</head>
<body>
<ul id='loc'>
<li>List 1 </li>
<li>List 2 </li>
<li>List 3 </li>
<li>List 4 </li>
</ul>
<a href="#" id='add'> Add List Item </a>
<br />
<a href="#" id='remove'> Remove List Item </a>
<br />
<ul >
<li>List 1 </li>
<li>List 2 </li>
<li>List 3 </li>
<li>List 4 </li>
</ul>
</body>
</html>

John

  • Registered: 2008-12-23
  • Posts: 80

Re: JQuery -- add remove list item

Yep!  That's it.  Thanks!

Last edited by williamrouse (2009-02-28 13:41:34)

  • k1d
  • New member
  • Offline
  • Registered: 2009-10-15
  • Posts: 3

Re: JQuery -- add remove list item

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

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: JQuery -- add remove list item

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(){
            $('<li> List ' + i + '</li>').appendTo('ul#loc');
            i++;
        });

        $('a#remove').click(function(){ 
            $('ul#loc li:last').remove();
            i--;
        });
    });
  • k1d
  • New member
  • Offline
  • Registered: 2009-10-15
  • Posts: 3

Re: JQuery -- add remove list item

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
  • New member
  • Offline
  • Registered: 2009-10-15
  • Posts: 3

Re: JQuery -- add remove list item

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

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: JQuery -- add remove list item

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 <li> in the unordered list. The jquery then looks for the previous <li> and removes it (if remove is clicked) or adds one (if add is clicked.) Unfortunately, the current jquery adds the <li> within the previous li (not outside the closing </li> tag)... not exactly what I wanted.

Still, in case it helps:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>title</title>

    <script src="jquery-1.3.2.min.js" type="text/javascript"> </script>
 
    <script  type="text/javascript">
    $(function(){

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

        $('a.remove').click(function(event){ 
            $(this).closest("li").prev("li").remove();
        });

    });

    </script>
    
</head>
<body>

    <ul id='loc'>
        <li>List 1 </li>
        <li>List 2 </li>
        <li>List 3 </li>
        <li>List 4 </li>
        <li><a href="#" class='remove'> Remove List Item </a> | <a href="#" class='add'> Add List Item </a></li>
    </ul>
    
    <ul ><br />
    <li>List 1 </li>
    <li>List 2 </li>
    <li>List 3 </li>
    <li>List 4 </li>
    </ul>

</body>
</html>
  • Registered: 2009-04-30
  • Posts: 102

Re: JQuery -- add remove list item

Or you can use .each():

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

Last edited by BeeDev (2009-10-21 03:11:21)