隐藏与删除DOM元素

隐藏与删除

处理DOM元素，隐藏或删除的最佳方法是什么？ 假设环境可以改变几次。 元素可以具有单击回调或其他事件回调。

隐藏

隐藏什么是最好的？ 如果单击按钮隐藏多个项目，您可以逐个隐藏，或者您也可以创建css规则来执行此操作。

选项1：

 .superContent{/*...*/} .superContent.noEdit .occultable{ display:none; }  
 Name   
 Edit  $(“#hideAll”).click(function(){ $(“.superContent”).toggleClass(“noEdit”); });  

http://jsfiddle.net/p8mU8/

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

选项2：

  $(“#hideAll”).click(function(){ $(“.occultable”).toggle(); });  

http://jsfiddle.net/JAmF9/

---

去掉

要修改DOM，您还可以删除不需要的项目，并在以后重新插入。

选项3：

 
 Name   
 Edit​  $("#hideAll").click(function(){ if( $(".superContent").find("#sendbutton").length>0 ){ $(".superContent").find("#sendbutton").remove(); } else{ $(".superContent").append(''); } });​  

http://jsfiddle.net/Yj5Aw/

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

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

Answer 1

你知道这很明显

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

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

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