仅使用CSS完全删除HTML元素？

Question

就像JavaScript中的removeAttribute一样，执行该操作后元素将不会在源代码中显示。

- silentwarrior

---

你可以使用 display:none。 - hoangkianh

CSS用于样式设计，而不是直接操作DOM。如果“display：none”无法实现您想要的效果，那么这是不可能的。 - Shadow

Answer 1

使用CSS无法从DOM树中移除元素。你只能用display: none属性防止它在布局中被渲染，但这不会阻止它响应事件或被CSS选择器（如+和:nth-child()）选中。虽然你无法与不存在的元素进行交互，也不能以通常的方式触发事件，但其“本质”仍然存在。

- BoltClock

---

同意，但请注意，在某些情况下，替换的内容可能会被卸载，实际上使一些元素对js不再可达（但可以通过DOM API访问，尽管它们不是文档树的一部分）。 - Kaiido

我不得不点踩，因为事件无法在 display: none; 元素上触发，至少在很多情况下都是如此。如果您能纠正我，我完全可以点赞这个回答。 - Cody

@Cody：你说得没错；直觉上，不存在的元素无法与之交互以触发事件。事件处理程序仍然存在，至少在编程上仍然可以调用。我认为我的答案可以措辞更好些。 - BoltClock

@BoltClock: 你是正确的...你仍然可以接收到在 display:none; 元素上分派的事件。我本来会点赞你的回复，但SO锁定了我的操作（很抱歉）。这里是一个CodePen证明你是正确的：https://codepen.io/cScarlson/pen/zYPLvRw?editors=1111 - Cody

@Cody：没问题，我在我的答案中添加了一些内容。 - BoltClock

啊哈！我刚刚成功给你的回答点了赞。感谢你对此的关注。 - Cody

Answer 2

这是不可能通过CSS实现的。 即使你使用display:none，元素仍然存在于DOM树中。

CSS用于样式设计而非DOM操作。请使用JavaScript进行操作。

- kiranvj

Answer 3

display: none;

'与visibility属性不同，display: none会将元素完全从文档中移除，而不是保留在正常的文档流中。它不占用任何空间，即使它的HTML仍然存在于源代码中。这是因为它确实已经从文档流中移除了。就所有目的而言，该项已经消失了。这可能是好事或坏事，具体取决于您的意图。如果您滥用此属性，它也可能对您的页面造成损害！'

https://www.lifewire.com/display-none-vs-visibility-hidden-3466884

- crffty

---

这应该是被选中的答案。 - Cody

Answer 4

你可以使用display: none来隐藏一个元素，但它仍然存在于DOM中。

你也可以使用visibility: hidden，它也仍然存在于DOM中，但是DOM将反映相同的垂直流，即使元素被隐藏。换句话说，如果元素是块级元素，则仍将为隐藏元素保留块级空间。而使用display: none时，随着元素的隐藏，空间也将被移除。

除非你使用JavaScript，否则使用CSS只能改变存在于DOM上的DOM元素的可见性。这取决于你想要做什么，它绝对可以满足你的需求。

如果你需要更多帮助，请在评论中提供更多细节，我很乐意帮助你。

- javascriptjames

Answer 5

使用CSS时，你必须将属性"display"更改为"none"。

而使用JavaScript时，你必须将"id属性"更改为另一个对应应用程序没有意义的值。

- Alcides Silva

Answer 6

你实际上是可以的。虽然不能直接在CSS中实现，但是结合Javascript/jQuery可以实现。

在HTML中，给想要移除的元素一个"class"为"removeFromDom"的类。

<p class="removeFromDom">your text here</p>

在 CSS 中，您可以添加这些行以使其在 JS 不起作用时变为不可见状态。

.removeFromDom { display:none !important; visibility:hidden !important; }

在一个jQuery文件中，你加载到任何站点上，创建这个函数：

$(document).ready(function() {
  $(".removeFromDom").remove();
});

完成了..你的jQuery文件已经从DOM中删除了你的项目。出于安全原因，如果有一个链接，任何人都不应该随时看到它，我不建议使用它。

- Michael

---

不错的尝试，这确实可以对抗浏览器开发工具（F12），但无法对抗源代码。 - silentwarrior