Several divs, how to find image and remove the parent divs

Question

I'm using draggable on <div class="items" holding these elements

<div class="item">
    <div class="thumb">
        <img id="image" src="source.png" />
    </div>
    <div class="description">
        <p>Some description here</p>
    </div>
</div>

Now on the droppable, I want only to keep the image of that div. I've tried with the following code, but doesn't seem to work...

$("#dropbar").droppable({
    accept: ".deal-itinerary-item .row",
    hoverClass: correct_placeholder,
    activeClass: active_placeholder,
    revert: false,
    tolerance: "pointer",

    drop: function (event, ui) {
        var dragging = ui.draggable.clone().find("img").remove();
        $(this).append(dragging).addClass("dropped");
    }
});

Thought this would find the img and remove anything else from the draggable.

What am I doing wrong and how can I solve this?

Thanks!

Answer 1

You are removing the img in your example because it's the what the jQuery object has selected when you call remove().

 var image = ui.draggable.find("img").clone();
 $(this).append(image).addClass("dropped");

I'm not sure what you're trying to delete, if it's the original draggable or if you are just cloning too much the whole thing. But if you want to delete the original draggable:

 var image = ui.draggable.find("img").clone();
 $(this).append(image).addClass("dropped");
 ui.draggable.remove();

probably works.