CODEWITHSUNDEEP
jquerylisthtmlappend
user342391
user342391

Reputation: 7847

Jquery appending list content to div

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????

Upvotes: 1

Views: 1885

Answers (2)

jigfox
jigfox

Reputation: 18177

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.

Upvotes: 1

Jonathan Park
Jonathan Park

Reputation: 775

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>

Upvotes: 0

Related Questions