隐藏与删除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包含大量元素.你觉得什么是最好的选择？哪个内存泄漏少,性能更高？

有一些像kendo-ui这样的javascript框架可以删除元素.jQueryUI更喜欢隐藏项目,但是窗口小部件Tab sortable可以创建由用户临时拖动的选项卡.

Answer 1

你知道这很明显

• 当您想要重新显示元素时,隐藏是最好的.
• 当您不再需要使用元素时,删除是最好的.

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

删除不必要的元素时,可以减少为页面分配的内存,但在大多数情况下,它不会发生重大变化.