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

【问题标题】：Remove spaces between links from html table if links removed如果链接被删除，则从 html 表中删除链接之间的空格
【发布时间】：2018-05-01 00:46:01
【问题描述】：

我的 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 个，我们可以在桌面上执行此操作吗？如果 table 不是做这一切的正确方法，还有其他简单的方法吗？

【问题讨论】：

请注意您的 HTML 无效。您不能将 div 作为 table 的子代
您的 HTML 标记无效。无论如何，在 CSS4 中，这应该是可能的：tr:not(:has(li > a)) {display: none;}
@RoryMcCrossan 这里可以省略table的使用，这可以简单地用divs而不是tr来实现，这样你就可以轻松管理布局了。

标签： javascript java jquery html css

【解决方案1】：

你应该删除完整的<TR>，.closest()可以用来遍历<TR>然后删除它。

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

【讨论】：

【解决方案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 中使用margin 而不是@987654335 @以&nbsp;为内容，这样可以更好的管理布局。

【讨论】：