javascript 隐藏与删除 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14058013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide vs Remove DOM elements
提问by Scipion
Hide vs Remove
隐藏与删除
What is the best way to handle DOM elements, hide or delete?. assume that the environment can change several times. Elements can have click-callbacks or other event callback.
处理 DOM 元素、隐藏或删除的最佳方法是什么？假设环境可以改变几次。元素可以有点击回调或其他事件回调。
Hide
隐藏
When hide what is best?. If clicking a button hide multiple items, you can hide one by one or you can also create css rules to do so.
什么时候隐藏什么最好？如果单击按钮隐藏多个项目，您可以一个一个隐藏，也可以创建 css 规则来执行此操作。
Option 1:
选项1：
<style>
.superContent{/*...*/}
.superContent.noEdit .occultable{
display:none;
}
</style>
<form class=”superContent” action=”...”>
<label>Name</label>
<input type=”text” />
<input type=”submit” class=”occultable” value=”send”/>
</form>
<button id=”hideAll”>Edit</button>
<script type=”text/javascript”>
$(“#hideAll”).click(function(){
$(“.superContent”).toggleClass(“noEdit”);
});
</script>
The other option is to just hide the desired items (these may be few or many):
另一种选择是隐藏所需的项目（这些可能很少或很多）：
Option 2:
选项 2：
<script type=”text/javascript”>
$(“#hideAll”).click(function(){
$(“.occultable”).toggle();
});
</script>
Remove
消除
To modify the DOM you can also delete unwanted items and re-insert them later.
要修改 DOM，您还可以删除不需要的项目并稍后重新插入。
Option 3:
选项 3：
<form class="superContent">
<label>Name</label>
<input type="text" />
<input id="sendbutton" type="submit" class="occultable" value="send"/>
</form>
<button id="hideAll">Edit</button>?
<script type=”text/javascript”>
$("#hideAll").click(function(){
if( $(".superContent").find("#sendbutton").length>0 ){
$(".superContent").find("#sendbutton").remove();
}
else{
$(".superContent").append('<input id="sendbutton" type="submit" class="occultable" value="send"/>');
}
});?
</script>
These are just small examples. Assuming a UI that contains a large number of elements. What do you think the best option?. Which has less memory leak and more performance?
这些只是小例子。假设一个包含大量元素的 UI。你认为最好的选择是什么？哪个内存泄漏更少，性能更高？
There are some javascript frameworks like kendo-ui that removes elements. jQueryUI prefers to hide items, but the widget Tab sortable creates the tab temporarily dragged by the user.
有一些 javascript 框架，比如 kendo-ui 可以删除元素。jQueryUI 更喜欢隐藏项目，但小部件 Tab 可排序创建由用户临时拖动的选项卡。
回答by gdoron is supporting Monica
It's kind of obvious you know
这很明显你知道
- Hide is the best when you want to re-show the elements.
- Remove is the best when you won't need to use the elements again.
- 当您想重新显示元素时，隐藏是最好的选择。
- 当您不需要再次使用元素时，删除是最好的。
When you hide elements and then re-show them those elements don't lose all their callback and data, specially when jQuery is in use.
当您隐藏元素然后重新显示它们时，这些元素不会丢失它们的所有回调和数据，特别是在使用 jQuery 时。
When you remove unnecessary elements, you reduce the memory allocated for your page, though in most scenarios it won't be a significant change.
删除不必要的元素时，会减少为页面分配的内存，但在大多数情况下，这不会有重大变化。
