camohub / jquery-sortable-lists

jQuery plugin to sorting lists also the tree structures.
MIT License
209 stars 60 forks source link

How can i add remove button for li element as open/close button? #32

Closed pyaehein closed 7 years ago

pyaehein commented 8 years ago

I want to use add and remove li list. I can add easily with jquery but i don't know how to add delete button as open/close like button. How can i do it ?

camohub commented 8 years ago
<li><div><i class="fa fa-trash ignore-class"></i>item xy</div></li>

$('.fa-trash').on('click', function()
{
    $(this).closest('li').remove();
});

I did not test it. Of course you have to check if the ul warapper of removed li remains empty.

kidino commented 7 years ago

I think in my implementation, it is also ignoring the ignore-class .... I cannot click on it

kidino commented 7 years ago

By the way, here is how I remove a node, and move the content upwards. So you only delete that one item and not the children.

function ontology_remove(item_id){
    var parent = $('#'+item_id).parent();
    var children = $('#'+item_id).find('ul').html();
    parent.prepend(children);
    $('#'+item_id).fadeOut().remove();
}
camohub commented 7 years ago

What it means "also ignoring the ignore-class". I dont know the structure of your list. Can you create an example and be little clear in explanation?

kidino commented 7 years ago

What I mean is this ... here is my options

                    var options = {
                        ignoreClass: 'clickable',
                        hintClass: 'hintClass',
                        placeholderClass: 'placeholderClass',
                    }

And here is my HTML

            <li id="item_1"><div>One 
                <a class="clickable btn-onto btn btn-xs btn-danger pull-right"><i class="fa fa-times"></i></a>
                <a class="clickable btn-onto btn btn-xs btn-primary pull-right"><i class="fa fa-pencil"></i></a>                
            </div></li>

See, I have the 'clickable' class. But I cannot click on the button. When clicking on it, it behave like I want to drag the whole item.

camohub commented 7 years ago

The reason is, the <i> element has to have clickable class too. Every element in "clickable" tree has to have clickable class.

kidino commented 7 years ago

All good. Thanks!