<分区>
隐藏与删除
处理 DOM 元素的最佳方式是什么，隐藏还是删除？。假设环境可以改变几次。元素可以有点击回调或其他事件回调。
隐藏
什么时候隐藏什么最好？。如果单击一个按钮隐藏多个元素，您可以一个一个地隐藏，也可以创建 css 规则来这样做。
选项 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>
另一种选择是只隐藏所需的元素(这些元素可能很少或很多):
选项 2:
<script type=”text/javascript”>
$(“#hideAll”).click(function(){
$(“.occultable”).toggle();
});
</script>
删除
要修改 DOM，您还可以删除不需要的元素并稍后重新插入。
选项 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>
这些只是一些小例子。假设一个包含大量元素的 UI。你认为最好的选择是什么？哪个内存泄漏更少，性能更高？
有一些 javascript 框架，如 kendo-ui，可以删除元素。 jQueryUI 更喜欢隐藏元素，但小部件 Tab sortable 会创建用户临时拖动的选项卡。