Question

I have two UL on my page. UL1 and UL2. Both are Sortable and draggable. When LI from UL1 is added to UL2, the LI is move out of UL1. In order to remove from the UL2, user click on a delete link inside of the LI. The logic is remove the item, and add it back to the UL1 from UL2.

This is my code:

$(".xOut").on("click", function(){
        var id = $(this).attr('id');
        $.ajax({

            url: '@Url.Action("RemoveCommand")',
            type: "POST",
            data: {
                aid: id,
                bId: @(Model.Id)
            },
            success: function(event, ui){
                var newListItem = $("<li />", {
                    html: $("#"+id).html()
                });

                $(newListItem).attr("id", id);

                newListItem.appendTo("#sortable1");
                $("#"+id).remove();
            }
        });
    });

Code work fine if I don’t add this line:

$(newListItem).attr("id", id);

I need the new item to had an id, and cannot work without it.

How can make this work?

Update Added HTML CODE:

<ul id="sortable1" class='droptrue'>
 @for (var i = 0; i < Model.SomeList.Count(); i++)
 {
     var item = @Model.SomeList.ElementAtOrDefault(i);
     if (item != null)
     { 
        <li id="@(item.Id)">
           <div>@item.Name</div>
       </li>
     }
 }
</ul>

<ul id="sortable2" class='droptrue'>
     @for (var i = 0; i < Model.SomeAssignedList.Count(); i++)
     {
         var item = @Model.SomeAssignedList.ElementAtOrDefault(i);
         if (item != null)
         { 
            <li id="@(item.Id)">
           <div>@item.Name</div>
           </li>
         }
     }
    </ul>

Answer 1

Instead of creating a new item and removing the old item, just move it:

$(".xOut").on("click", function(){
  var id = $(this).attr('id');
  $.ajax({
    url: '@Url.Action("RemoveCommand")',
    type: "POST",
    data: {
      aid: id,
      bId: @(Model.Id)
    },
    success: function(event, ui){
      $("#sortable1").append($("#"+id));
    }
  });
});