Jquery: how tp remove something from list?

JavaScript
1

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:


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


$("#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

Found it:

ui.item.index();

3

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:


 $("#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.

4

Ahh…prepend()

5

Hi I tried .append() method but it adds to the end of the list.

Can it append to the begining? Thanks

6

how do I add another <li> item?

I have tried:


$('#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.

7

many thanks.

8

This is method for you


$("#sortable").sortable();

function removeItem() {
                $("#sortable").children().children().children(":checked").each(function() {
                    $(this).parent().parent().remove();
                });
            }