html - 在 html/css 中隐藏嵌套 anchor

Question

我有以下代码:

<a id="outer-anchor" href="/test">
    text in anchor
    <a id="inner-anchor" href="/test2" style="display:none"></a>
</a>

我在不同的浏览器中尝试过这个，在每个浏览器中，内部 anchor 都从外部 anchor 中消失了。所以它被渲染成这样:

<a id="outer-anchor" href="/test">
    text in anchor
</a>            
<a id="inner-anchor" href="/test2" style="display:none"></a>

有人知道为什么以及如何解决这个问题吗？

提前致谢

Answer 1

不能在 anchor 标签内放置 anchor 标签。

这会将 childNode 移出 outer-anchor 成为它之后的兄弟节点，然后很好地隐藏它；

JSfiddle

HTML

<div id="parent-placeholder">
    <a id="outer-anchor" href="/test">
        text in anchor
        <a id="inner-anchor" href="/test2" style="display:none"></a>
    </a>
</div>

JavaScript

var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;

inner.style.display = 'none';

inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);

输出

<div id="parent-placeholder">
    <a id="outer-anchor" href="/test">text in anchor</a>
    <a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>

parent-placeholder div 的存在纯粹是为了展示如何与 anchor 所在的父 DOM 元素相关联。