更好的方式來添加/從列表中刪除列表項目以無序的方式與Jquery

Question

我有一個列表<tr> s和每個tr包含一些輸入標籤。

我有一個javascript函數來添加一個新的tr，但每個tr有它自己的刪除按鈕。因此用戶可以刪除位於列表中間的tr。 tr應該按照用戶按下刪除按鈕的順序刪除。

目前，它似乎工作。請參閱下面的代碼。
它基本上找到所有將被刪除的節點，刪除先前綁定的事件，並重新綁定新的事件以跟蹤哪個節點被點擊並因此必須被刪除。

的tr s的也填充對象的列表使用<c:forEach>

function addPressRelease(){ 
    var lastIndex = $(".pressRelease").length; 
    console.log("lastIndex:"+lastIndex); 
    var newIndex=lastIndex+1; 
    var html = "<tr class='pressRelease' id='pr_"+newIndex+"'>"; 
    html+="<td class='rLine'><input type='text' name='pressArticleTitles' class='it' style='width:260px;'/></td>"; 
    html+="<td>"; 
    html+="<input name='pressArticleLinks' type='text' class='it' style='width:495px;'/>"; 
    html+='<img class="delPr" src="/resources/00Publish/img/common/del.gif" alt="Delete" class="del buttonised" >'; 
    html+="</td>"; 
    html+="</tr>"; 
    console.log("appending.."); 
    $("#pressReleaseTable").append(html); 

    reorganiseDynamicList("pressRelease", "delPr", "pr_"); 
} 

function deletePressRelease(id){ 

    delNodeById(id); 
    reorganiseDynamicList("pressRelease", "delPr", "pr_"); 
} 

function reorganiseDynamicList(nodeClass, containerClass, nodePrefix){ 

    var nodes = $("."+nodeClass); 

    $(nodes).each(function(index, element){ 

     $(element).prop("id", nodePrefix+index); 

    }); 

    var containers = $("."+containerClass); 

    $(containers).each(function(index, element){ 
     $(element).off(); 
     $(element).click(function(){ 
      delNodeById(nodePrefix+index) 
     }); 

    }); 

} 

function delNodeById(id){ 
    console.log("deleting node:"+id); 
    $("#"+id).remove(); 
} 

服務器返回的，但我覺得這可能是低效的，並認爲也許有一個更好的辦法，但問題是，我想不出任何。

有沒有更好的方法來做到這一點？

編輯

至於建議，我做了一個JSFiddle頁。這是我第一次使用JSFiddle。我希望這有幫助。

Answer 1

試試這個：

$('body').on('click','.del',function(){ 

    $(this).closest('tr').remove(); 
}); 

https://jsfiddle.net/gxam0vdf/2/