您的位置：首页 > 其它

DOM节点删除之empty()的基本用法

2017-08-02 18:22 375 查看

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：

<div class="hello"><p>慕课网</p></div>

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

注意！

通过empty移除了当前div元素下的所有p元素
但是本身id=test的div元素没有被删除

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title></title>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

<style>

div {

background: #bbffaa;

width: 300px;

}

</style>

</head>

<body>

<h2>通过empty移除元素</h2>

<div id="test">

<p>p元素1</p>

<p>p元素2</p>

</div>

<button>点击通过jQuery的empty移除元素</button>

<script type="text/javascript">

$("button").on('click', function() {

//通过empty移除了当前div元素下的所有p元素

//但是本身id=test的div元素没有被删除

$("#test").empty()

})

</script>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航