動態元素添加到jQuery的可排序

Question

這應該是我的jQuery的可排序的最後一個問題......一會兒:)

我有我能夠從動態刪除元素的列表。當用戶點擊該元素的X關閉框，我得到的父（元素本身），並刪除它：

function DeleteLink() { 
     var jItem = $(this).parent(); 

     var LinkId = jItem[0].childNodes[1].innerText || jItem[0].childNodes[3].textContent; 
     var LinkTitle = jItem[0].childNodes[2].innerText || jItem[0].childNodes[5].textContent; 

     if (!confirm(String.format("Are you sure you want to delete link #{0}?\n\nTitle: {1}", LinkId, LinkTitle))) 
      return; 

     jItem.remove(); 
     $.post("/Home/DeleteLink/" + LinkId); 
     showStatus("Link deleted...", 5000); 
    } 

如果你有興趣，無序列表創建這樣的：

<ul id="sortable1" class="connectedSortable"> 
     <% foreach (Link l in Model) 
      { 
       if (l.Visible == true) 
       {%> 
        <li class="photolistitem" style="min-height:50px;"> 
        <div class="imagecontainer"><img src="/Content/images/link.jpg" style="float:left; padding-right:5px;" class="thumbnailimage" alt="" /></div> 
        <div id='<%=l.Id%>Id'><%=l.Id%></div> 
        <div id='<%=l.Id%>Description'><%=l.Title%></div> 
        <div id='<%=l.Id%>Description'><%=l.Description%></div> 
        <div id='<%=l.Id%>Description'><%=l.Url%></div> 
        <div class='deletethumbnail'>X</div> 
        </li> 
       <%}%> 
     <%}%> 
    </ul> 

我想要做的是在頁面底部有一個表單，以便用戶可以動態添加元素 - 他們只需要插入描述，標題和URL（我將使用另一個jquery插件來驗證輸入）。

我認爲最大的挑戰是動態創建一個可以附加到列表中的對象。任何人都可以爲我指出正確的方向嗎？

Answer 1

jQuery的

thisDependant = $('.DependantTemplate').clone(); 
$(thisDependant).removeClass("DependantTemplate"); 
$(thisDependant).addClass("Dependant" + dependantNum); 
$('.DependantList').append(thisDependant); 

HTML

<div class="DependantTemplate hidden"> 
    <div style="float:left;" class="DependantNumber spacerRight10"></div> 
    <div style="float:left;" class="DependantFirstName spacerRight10"></div> 
    <div style="float:left;" class="DependantLastName spacerRight10"></div> 
    <div style="float:left;" class="DependantDateOfBirth spacerRight10"></div> 
    <div style="float:left;" class="DependantGender spacerRight10"></div> 
    <div style="float:left;" class="DependantType"></div> 
    <div class="clearFloats"></div> 
</div> 

<div class="DependantList"></div> 

以上是我用做一樣的，你要尋找的。