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

另一个选项是隐藏所需的项目(这些可能很少或很多)：

选项二：

<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会创建用户暂时拖动的选项卡.