Question

我有<tr>个列表，每个tr都包含一些输入标记。

我有一个javascript函数来添加新的tr，但每个tr都有自己的删除按钮。因此，用户可以删除列表中间的tr。应以用户按下删除按钮的任何顺序删除tr。

目前，它似乎有效。请参阅以下代码它基本上找到所有要删除的节点，删除先前绑定的事件并重新绑定新事件以跟踪单击哪个 n 节点，因此必须删除。

tr也填充了使用<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/

使用Jquery

1 个答案: