《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.14 技巧:移除元素

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.14节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

3.14 技巧:移除元素

当使用detach()移除元素后,它会从屏幕和文档树中消失,但它还保存在内存中。代码清单3-14演示使用remove()和empty()函数把元素从文档和内存中删除。remove()函数会返回被移除的元素,所以可以把它们用变量保存起来,再将它们重新插入到页面中。请记住,当用remove()函数来这么做的时候,所有的jQuery数据和事件信息都会丢失。

代码清单3-14 演示remove()和empty()之间的区别

00 <!DOCTYPE html>
01 
02 <html lang="en">
03 <head>
04  <title>The remove() and empty() function</title>
05  <style>
06  /* 请将下列代码移至一个外部的
07    .css文件 */
08  p {
09   border: 1px solid red;
10  }
11  </style>
12 </head>
13 <body>
14 
15 <h1>Click on the paragraph to remove</h1>
16 <p id="remove">This text will have a different appearance after
17   clicking it</p>
18 
19 <h1>Click on the paragraph to remove the spans</h1>
20 <p id="remove-spans">This text <span id="test">will</span> 
21  have <span>a</span> different appearance after 
22  <span>clicking</span> it</p>
23 
24 <h1>Click on the paragraph to empty</h1>
25 <p id="empty">This text will have a different appearance
26   after clicking it</p>
27 
28 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
29 
30 <script>
31 // 请将下列代码移至一个外部的.js文件中
32 $(document).ready(function() {
33  
34  $('p#remove').click(function() {
35   $(this).remove();
36  });
37 
38  $('p#remove-spans').click(function() {
39   $(this).children('span').remove();
40  
41   // 无效:
42   //$(this).remove('span');
43  
44   // 移除元素自身:
45   //$(this).remove(':has(span)');
46  });
47 
48  $('p#empty').click(function() {
49   $(this).empty();
50  });
51  
52 });
53 </script>
54 </body>
55 </html>

第35行的remove()函数移除了整个段落元素。在第39行,remove()移除了段落中的span元素。和remove()函数的其他示例类似,也可以使用$(this).children().remove('span')实现相同的功能。第49行调用empty()时,段落元素依旧存在,但是它的文本内容被移除了。如果段落元素包含了任何子元素,它们也会被删除。请运行上面的代码示例,看一看红色边框的视觉效果。

上一篇:Data Structure_二叉树_集合_堆_并查集_哈希表


下一篇:[LeetCode] Invert Binary Tree - 二叉树翻转系列问题