如果删除了链接，则从html表中删除链接之间的空格

Question

我的jsp下面的表格中有使用java arraylist

在页面加载时动态链接的链接

<%ArrayList<String> display  = ArrayList<String>)session.getAttribute("links");       %>
<table border="0" width="100%" style ="">
    <tr></tr>
    <td width="20%"></td>
    <table border="0" width ="50%" id="LinkDisplay">
        <div id="LinkDisplay">
            <%if(display!=null){
            for(int p=0;p<display.size();p++){%>
            <tr><td width="42%">&nbsp;</td><td><a href="javascript:removeLink('<%=display.get(p)%>')"><%=display.get(p)%></a><br></td><td>&nbsp;</td></tr>
            <% } }%>
        </div>
    </table>
    <td></td>
    <tr></tr>
</table>

当我点击链接时，它会删除并隐藏调用removeLink javascript函数的链接

$('#LinkDisplay a').click(function() { 
    var $this = $(this);         
    $this.remove();
}

但是当链接删除时，它会留下链接之间的空格。单击链接时如何删除该空间。我试图隐藏甚至试图删除空的td元素（没有链接文本）但它没有帮助.. 所有链接的页面如下所示： -

点击链接后，它会留下如下空格： -

如果我想添加滚动条超过10个链接，我们可以在桌面上执行此操作。 如果表不是完成所有这些的正确方法，还有其他简单方法吗？

Answer 1

您应删除完整的<TR>，.closest()可用于遍历<TR>，然后将其删除。

$('#LinkDisplay a').click(function () {
    var $this = $(this);
    $this.closest('tr').remove();
});

Answer 2

您只是删除了a元素，您需要删除整个tr：

$('#LinkDisplay a').click(function() { 
    var $this = $(this);         
    $this.parent().parent().remove();
}

甚至更好$this.parent("#LinkDisplay tr").remove();。

注意：

• 您不能对多个元素使用相同的id="LinkDisplay"，而是在table和div使用它。
• 您的HTML无效，您不能div作为table的直接子项，需要修复。

是的，您可以在没有table的情况下执行此操作，只需为每个链接使用div，默认情况下它们将显示为block，并使用margin div代替td  作为内容，这样您就可以更好地管理布局。