如果删除了链接，则从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 ，并使用您的div而不是td使用margin   作为内容，这种方式可以更好地管理布局。