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正在使用时。

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

隐藏与删除DOM元素

隐藏与删除

1 个答案: