DOM节点删除之empty()的基本用法
2017-08-02 18:22
417 查看
这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面的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>
相关文章推荐
- DOM节点删除之empty()的基本用法
- jquery DOM节点删除之empty()的基本用法
- DOM节点删除之empty()和remove()的有参用法和无参用法
- DOM节点删除函数removeChild()用法实例
- DOM节点删除之remove()的有参用法和无参用法
- DOM节点删除之empty和remove区别
- DOM——节点删除.empty()、remove()和.detach()
- jQuery中DOM节点删除之empty与remove
- DOM节点删除之empty和remove
- DOM节点删除函数removeChild()用法实例
- 基于DOM节点删除之empty和remove的区别(详解)
- jquery DOM节点删除之remove()的有参用法和无参用法
- DOM节点删除之empty和remove区别
- jquery DOM节点删除之empty和remove区别
- DOM中插入和删除节点(insertBefore()方法和removeChild()方法)
- 创建和删除节点:——核心DOM
- DOM节点深度克隆函数cloneNode()用法实例
- Netdom query基本用法
- jQueryDom操作之删除节点
- JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】