Jquery appending list content to div

Question

I want to append the content within my 'li' to the 'trashbin' div when the link class 'ui-icon-trash' is clicked. I have a list and some li content like so:

  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">item1</h5>
                    <img src="tiem.png"  alt="item1"/>
                    <div class="draggableicons">
                    <a style="float:left" href="#" title="product information here" class="ui-icon ui-icon-circle-plus">More info...</a>
<a href="link/to/cart/script/when/we/have/js/off" title="Delete this image" 
class="ui-icon ui-icon-trash">
Delete image</a>
                    </div>
                </li>

    <div id="trashbin"></div>

I want to append everything within the 'li' tag to a 'div' when 'ui-icon-trash' is clicked. I want it to be cloned then appended so that I can run it multiple times. How can i do this????

Answer 1

This should do the trick:

$(function(){
  $('a.ui-icon-trash').click(function(){
    $(this).closest('li').appendTo('#trashbin ul');
    // or if you want to keep the original:
    $(this).closest('li').clone().appendTo('#trashbin ul');
  });
});

You need to add an <ul/> element to the trashbin, because an <li/> must be encapsulated in it.

Answer 2

When javascript is on you will want to add an onclick event to the delete this image link. I use the onclick method rather than depending on jquery to add it because it is easier to control server side. If you would rather just move the list item to the trash rather than add a copy just remove the .clone() from the jquery in the sendListItemToTrash function.

<script>
function sendListItemToTrash(ListItem)
{
    $(ListItem).clone().appendTo('#trashbin ul');
}
</script>
  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">item1</h5>
                    <img src="tiem.png"  alt="item1"/>
                    <div class="draggableicons">
                    <a style="float:left" href="#" title="product information here" class="ui-icon ui-icon-circle-plus">More info...</a>
<a href="link/to/cart/script/when/we/have/js/off" onclick="javascript:sendListItemToTrash($(this).closest("li"));" title="Delete this image" 
class="ui-icon ui-icon-trash">
Delete image</a>
                    </div>
                </li>

    <div id="trashbin"><ul></ul></div>