Jump to content
Stef's Coding Community
williamrouse

JQuery -- add remove list item

Recommended Posts

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>   })

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

    Share this post


    Link to post
    Share on other sites

    Or you can use .each():

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

    Edited by BeeDev

    Share this post


    Link to post
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

    ×
    ×
    • Create New...