移除元素
Posted 麦克斯-侯的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移除元素相关的知识，希望对你有一定的参考价值。
| 方法 | 说明 |
| remove() | 从DOM中移除匹配的元素及其所有后代和文本节点。 |
| detach() | 从DOM中移除匹配的元素及其所有后代和文本节点。还会在内存中保留副本。通常使用remove()方法。 |
| empty() | 从DOM中移除匹配元素子节点及后代。 |
| unwrap() | 移除匹配结果的父节点，并保留匹配元素。 |
remove 示例，移除全部元素
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>remove</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>移除元素</button> <script> $(‘button‘).on(‘click‘, function () { $(‘div‘).remove(); }); </script> </body></html> |
remove 示例，移除指定的元素
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>remove</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>删除元素</button> <script> $(‘button‘).on(‘click‘, function () { $(‘li‘).remove(‘#a‘); }); </script> </body></html> |
需要指定到具体的才能移除哦。
detach()示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>detach</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>移除元素</button> <script> $(‘button‘).on(‘click‘, function () { $(‘div‘).detach(); }); </script> </body></html> |
empty示例，清除所有元素文本
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>empty</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>删除元素</button> <script> $(‘button‘).on(‘click‘, function () { $(‘li‘).empty(); }); </script> </body></html> |
unwrap() 示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>unwrap</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>移除元素</button> <script> $(‘button‘).on(‘click‘, function () { $(‘ul‘).unwrap(); }); </script> </body></html> |
以上是关于移除元素的主要内容，如果未能解决你的问题，请参考以下文章