清空元素 删除元素remove和detach的区别
时间：5年前 阅读：5656
1、清空元素 删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
// 清空元素内容 empty
// $('#box').empty();
// 删除元素 remove
// $('#box').remove();
// 也是删除元素
$('#box').detach();
})
})
</script>
</head>
<body>
<h1 id="aa">这个是h1标签</h1>
<input type="button" name="" id="btn" value="来点我呀" />
<br /><br />
<div id="box">
<h2>如果你是工作经验小于2年的朋友0</h2>
<h2>如果你是工作经验小于2年的朋友1</h2>
<h2>如果你是工作经验小于2年的朋友2</h2>
<h2>如果你是工作经验小于2年的朋友3</h2>
<h2>如果你是工作经验小于2年的朋友4</h2>
<h2>如果你是工作经验小于2年的朋友5</h2>
<h2>如果你是工作经验小于2年的朋友6</h2>
</div>
</body>
</html>
上面代码效果图片：
2、remove和detach的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#aa').click(function(){
alert('哈哈哈');
})
// 删除元素
$('#btn1').click(function(){
// remove 会将元素节点和它身上的事件效果都删除
// detach只删除元素节点,不删除它身 上的事件和效果
// 区别 这个点恢复后,原来的#aa单击事件删除了
// tt = $('#aa').remove();
// 区别 这个点恢复后,原来的#aa单击事件还在
tt = $('#aa').detach();
})
// 恢复元素
$('#btn2').click(function(){
$("#btn2").after(tt);
})
})
</script>
</head>
<body>
<input type="button" name="" id="btn1" value="删除" />
<input type="button" name="" id="btn2" value="恢复" />
<h1 id="aa">这个是h1标签</h1>
<br /><br />
<div id="box">
<h2>如果你是工作经验小于2年的朋友0</h2>
<h2>如果你是工作经验小于2年的朋友1</h2>
<h2>如果你是工作经验小于2年的朋友2</h2>
<h2>如果你是工作经验小于2年的朋友3</h2>
<h2>如果你是工作经验小于2年的朋友4</h2>
<h2>如果你是工作经验小于2年的朋友5</h2>
<h2>如果你是工作经验小于2年的朋友6</h2>
</div>
</body>
</html>
上面代码效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论