隐藏与删除 DOM 元素 [关闭]

Question

隐藏与删除

处理 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>

http://jsfiddle.net/p8mU8/

另一种选择是只隐藏所需的项目（这些可能很少或很多）：

选项 2：

<script type=”text/javascript”>
    $(“#hideAll”).click(function(){
        $(“.occultable”).toggle();
    });
</script>

http://jsfiddle.net/JAmF9/

---

删除

要修改 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>

http://jsfiddle.net/Yj5Aw/

这些只是小例子。假设 UI 包含大量元素。你认为最好的选择是什么？哪个内存泄漏更少，性能更高？

有一些 javascript 框架，例如 kendo-ui，可以删除元素。 jQueryUI 更喜欢隐藏项目，但小部件 Tab sortable 会创建用户临时拖动的选项卡。

Answer 1

很明显你知道

• 当您想重新显示元素时，隐藏是最好的选择。
• 当您不需要再次使用这些元素时，最好删除。

当您隐藏元素然后重新显示它们时，这些元素不会丢失所有的回调和数据，特别是在使用 jQuery 时。

当您删除不必要的元素时，您会减少为您的页面分配的内存，但在大多数情况下这不会是一个显着的变化。