drag/drop and sortable jquery UI

Question

im using jquery ui drag/drop and sortable methods i can able to drag contents from one div section and drop it in another div section and in droppable div im sorting it!

my requirement is i have class button 'hello' when i drop in my droppable section it should be hidden i dont want to display button in my droppable div

please anyone help me out in achieving it Thanks!!!

html code

<form method="post" action="">
        <span>Drop:</span>
            <div id="qselected">
            </div>
    </form>
    <span>Drag:</span>
        <div id="qlist">
            <div class="qitem">
                <span data-item="1" class="question">Abc</span>
                <input type="hidden" value="1" name="question[]" />
                <button class="hello">hello</button>
            </div>
            <div class="qitem">
                <span data-item="2" class="question">xyz</span>
                <input type="hidden" value="2" name="question[]" />
                <button class="hello">hello</button>
            </div>
        </div>

jquery code

<script type="text/javascript">
        $(document).ready(function() {

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

        $(".qitem").draggable({
            containment : "#container",
            helper : 'clone',
            revert : 'invalid',
            greedy: true
        });

        $("#qselected, #qlist").droppable({
            revert:true,
            hoverClass : 'ui-state-highlight',
            greedy: true,
            accept:'.hello',
            drop : function(ev, ui) {
                $(ui.draggable).clone().appendTo(this);
                //$(ui.draggable).remove();
            },
        });
    });

    </script>

Answer 1

You could do the follow:

$("#qselected, #qlist").droppable({
    revert:true,
    hoverClass : 'ui-state-highlight',
    greedy: true,
    accept:'.qitem',
    drop : function(ev, ui) {

       $(ui.draggable).clone().appendTo(this);

       if ($(this)[0].id === "qselected")
       {
          console.log($(this).closest("button").find('.hello'));
          $(this).find('.hello').hide();
       }
    },
});

JSFIDDLE EXAMPLE

Answer 2

You can check the length of items which are dropped in dropable area as follows:

$( "#droppable" ).droppable({
  drop: function() {
    var dropbableEle = $(".dropableEle").length;
    if(dropbableEle>0){
        //you can place the code to remove the button   
    }

  }
});