SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery: how tp remove something from list?

    Hi! I have a list of items and it implements sortable. I want the specified item to be removed when the user checks the checkbox in the list and clicking on remove. Here is the code:

    Code:
    <ul id="sortable">
            <li id="1" class="uis"><span class="ui"><input name="checkboxSelected" type="checkbox" />Item 1</span></li>
            <li id="2" class="uis"><span class="ui"><input name="checkboxSelected" type="checkbox" />Item 2</span></li>
            <li id="3" class="uis"><span class="ui"><input name="checkboxSelected" type="checkbox" />Item 3</span></li>       
    </ul>
    
    <input type="button" onclick="removeItem()" value="remove"/>
    And the jquery is:

    Code:
    $("#sortable").sortable();
    
    function removeItem() {
            $("#sortable").children().children().children(":checked").each(function() {
          var node = $(this).parent().parent();
          $("#sortable").not(node);
            });
    }
    But it doesn't work. Please help thanks.

  2. #2
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is method for you
    Code:
    $("#sortable").sortable();
    
    function removeItem() {
                    $("#sortable").children().children().children(":checked").each(function() {
                        $(this).parent().parent().remove();
                    });
                }
    http://www.wiseblog.info
    Programmers don't die, they just GO SUB without return.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do I add another <li> item?

    I have tried:

    Code:
    $('#sortable').add('<li id="4" class="uis"><span class="ui"><input name="checkboxSelected" type="checkbox" />Item 4</span></li>');
    but it doesn't work. Please help. Thanks. And I would like to add it to the top of the list.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi I tried .append() method but it adds to the end of the list.

    Can it append to the begining? Thanks

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh...prepend()

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

    How do I get the old and new position of the item dragged? I need the position so that I can do sorting of some data associated with it. I can't use the id because in the list of items, there can be duplicate ids.

    This is what I have tried:

    Code:
     $("#sortable").sortable({start:posStart,stop:posStop});
    
     var posStart = function(e, ui) {        
            el = e.target;           
            var index = $(this).children('li').index(el);
            $("#old").text(index);
        }
    
        var posStop = function(e, ui) {
            el = e.target;
            var index = $(this).children('li').index(el);
            $("#new").text(index);
        }
    Problem is I always get -1 for the old and new positions. Please help. Thanks.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found it:

    ui.item.index();


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •