您的位置：首页 > Web前端 > JQuery

jQuery的DOM操作（四）

2015-11-07 22:58 537 查看

**jQuery的DOM操作（四、删除节点）**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的DOM操作（四）</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="../jquery-1.9.1.js"></script>
<style type="text/css">
body{margin: 0;padding: 0;}
.content{width: 1000px;overflow: hidden;margin: 30px auto;position: relative;}
</style>
</head>
<body>
<div class="content">
<h1>jQuery中的DOM操作（四、删除节点）</h1>
<div class="part1">
<h2>删除节点</h2>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
<p>
<b>删除节点的方法：remove(),detach(),empty()</b>
<span>1.remove()</span>
<pre>
eg1:
$("ul li:eq(1)").remove();
结果：
上面的第二个li（橘子）就会被删除掉。
结果是：
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>

eg2:
var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");
//上面可以简写称为：$("ul li:eq(1)").appendTo("ul");
</pre>
<span>2.detach()</span>
<p>detach()与remove()方法不同地方是：detach()方法会把所有绑定的事件、附加的数据等都会保留下来</p>
<pre>
eg:
$("ul li").click(function(){
alert($(this).html());
})
var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");
注释：删除掉的li后来又添件进来还具有点击事件这个功能。
</pre>
<span>3.empty()</span>
<p>empty()方法其实不是删除，而是清空的功能</p>
<pre>
eg:
$("ul li:eq(1)").empty();
结果是：
<ul>
<li>苹果</li>
<li></li>
<li>香蕉</li>
</ul>
</pre>
</p>

<div>
小结：
remove():就是删除你制定的元素,删除的该元素将会失去绑定、附加的数据。
detach():删除掉，再添加回来的时候，该元素依然保留了绑定、附加的数据。
empty(): 该方法其实不是删除元素，而是清空该元素的内容。
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航