Jquery добавление содержимого списка в div

Question

Я хочу добавить содержимое в моем 'li' в div 'trashbin' при нажатии на ссылку класса 'ui-icon-trash'.У меня есть список и некоторое содержание li, например, так:

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

Я хочу добавить все, что находится внутри тега 'li', в 'div' при нажатии кнопки 'ui-icon-trash'.Я хочу, чтобы он был клонирован, а затем добавлен, чтобы я мог запустить его несколько раз.Как я могу это сделать ????

Answer 1

Это должно сработать:

$(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');
  });
});

Вам необходимо добавить элемент <ul/> в корзину, потому что в него должен быть инкапсулирован <li/>.

Answer 2

Когда javascript включен, вы захотите добавить событие onclick к ссылке удалить это изображение.Я использую метод onclick, а не в зависимости от jquery, чтобы добавить его, потому что это легче контролировать на стороне сервера.Если вы предпочитаете просто переместить элемент списка в корзину, а не добавить копию, просто удалите .clone() из jquery в функции sendListItemToTrash.

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