首頁 > 開發者 > JavaScript
需求
從DOM樹中移除元素。
解決方案
用remove()方法可以將選中的元素集及其子項目從DOM樹中移除。以下面的代碼為例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3>Anchors</h3>
<a href='#'>Anchor Element</a>
<a href='#'>Anchor Element</a>
<a href='#'>Anchor Element</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('a').remove();
</script>
</body>
</html>當上述代碼用瀏覽器開啟後，在JavaScript執行之前，頁面會包含超連結a元素。當remove()方法被執行後，DOM樹中的超連結a元素均被移除，而頁面上只剩下<h3>元素。
remove()方法還接受一個CSS運算式參數，用於對需要移除的元素進行過濾。比如，上述代碼可以被改為僅移除class值為”remove”的超連結元素：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3>Anchors</h3>
<a href='#' class='remove'>Anchor Element</a>
<a href='#'>Anchor Element</a>
<a href='#' class="remove">Anchor Element</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('a').remove('.remove');
</script>
</body>
</html>討論
使用jQuery的remove()方法需要注意兩件事情：
使用remove()方法可以將元素從DOM樹中移除，但是這些元素依然還在當前選擇的jQuery元素集中。remove()方法之後的代碼依舊可以對這些元素進行操作，甚至重新插入到DOM樹中。
remove()方法在將元素從DOM樹中移除之外，還會刪除所有該元素上的事件監聽器與快取資料。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
