Question

I have a draggable element , that when its dropped onto the target, it adds a delete button:

    $( "#committed" ).droppable({
                hoverClass: 'drophover',
                drop: function( event, ui )
                {

                    $(function()
                    {
                        var done;

                        if( done ) return;
                        done = true;

                        $(ui.draggable).append('<button class="delBtn" type="reset">X</button>');

                        $(ui.draggable).draggable( "option", "disabled", true );

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

                    });

                }

Once its been dropped, it then becomes sortable. The issue is , everytime the element is sorted, the Delete button gets added again. As there are multiple elements being dragged and dropped and then sorted, so .length>? doesn’t work.

I essentially need

If (this.delBtn exists)

Answer 1

I updated another jsfiddle project, there the button is added only if the button does not exist on the draggable object yet: jsfiddle example

The trick here is this:

if ($(ui.draggable).find('button.delBtn').length == 0) {
      $(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
}

It checks if the dragged item contains a button with class delBtn. If not then it adds the button.