就像JavaScript中的removeAttribute
一样,执行该操作后元素将不会在源代码中显示。
使用CSS无法从DOM树中移除元素。你只能用display: none
属性防止它在布局中被渲染,但这不会阻止它响应事件或被CSS选择器(如+
和:nth-child()
)选中。虽然你无法与不存在的元素进行交互,也不能以通常的方式触发事件,但其“本质”仍然存在。
display: none;
元素上触发,至少在很多情况下都是如此。如果您能纠正我,我完全可以点赞这个回答。 - Codydisplay:none;
元素上分派的事件。我本来会点赞你的回复,但SO锁定了我的操作(很抱歉)。这里是一个CodePen证明你是正确的:https://codepen.io/cScarlson/pen/zYPLvRw?editors=1111 - Cody这是不可能通过CSS实现的。
即使你使用display:none
,元素仍然存在于DOM树中。
CSS用于样式设计而非DOM操作。请使用JavaScript进行操作。
display: none;
'与visibility属性不同,display: none会将元素完全从文档中移除,而不是保留在正常的文档流中。它不占用任何空间,即使它的HTML仍然存在于源代码中。这是因为它确实已经从文档流中移除了。就所有目的而言,该项已经消失了。这可能是好事或坏事,具体取决于您的意图。如果您滥用此属性,它也可能对您的页面造成损害!'
https://www.lifewire.com/display-none-vs-visibility-hidden-3466884
你可以使用display: none
来隐藏一个元素,但它仍然存在于DOM中。
你也可以使用visibility: hidden
,它也仍然存在于DOM中,但是DOM将反映相同的垂直流,即使元素被隐藏。换句话说,如果元素是块级元素,则仍将为隐藏元素保留块级空间。而使用display: none
时,随着元素的隐藏,空间也将被移除。
除非你使用JavaScript,否则使用CSS只能改变存在于DOM上的DOM元素的可见性。这取决于你想要做什么,它绝对可以满足你的需求。
如果你需要更多帮助,请在评论中提供更多细节,我很乐意帮助你。
<p class="removeFromDom">your text here</p>
.removeFromDom { display:none !important; visibility:hidden !important; }
$(document).ready(function() {
$(".removeFromDom").remove();
});
完成了..你的jQuery文件已经从DOM中删除了你的项目。出于安全原因,如果有一个链接,任何人都不应该随时看到它,我不建议使用它。
display:none
。 - hoangkianh