jQuery删除DOM节点
jQuery删除DOM节点
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body >
<div >div001</div>
<div >div002</div>
<div >div003</div>
<div>
<button >click me to use remove()</button>
<button >click me to use remove(selector)</button>
<button >click me to use detach()</button>
<button >click me to use detach(selector),这个有问题</button>
<button >click me to use empty()</button>
<button >click me to use empty(selector),这个会全清空</button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index026.js"></script>
</body>
</html>$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
initDiv();
});
function btn001Click() {
// 得到的对象是jQuery对象；
var removed = $('#div001').remove();
console.log(removed);
// remove之后会把事件清除；虽然还可以继续加添回来；
$('#div003').after(removed);
}
function btn002Click() {
// 这样可以使用选择器；这样有问题的，在console中看到removed是一堆的；
// 但是结果好像是正确的；
var removed = $('div').remove('#div002');
// 这里面隐含了一个遍历，把div002after到了每一个找到的div层后面；
$('div').after(removed);
}
function btn003Click() {
var detached = $('#div001').detach();
$('#div003').after(detached);
}
function btn004Click() {
// 这样选择好像是有问题的，在console中看到的detached是一堆的；
var detached = $('div').detach('#div002');
// 这样好像是有问题的；
$('#div003').after(detached);
}
function btn005Click() {
$('#div001').empty();
}
function btn006Click() {
// 不接受这样的参数；
$('div').empty('#div001');
}
function initDiv() {
$('div').click(function() {
// 获取点击事件的DOM对象: arguments[0].target.id
console.log('%c' + arguments[0].target.id + ' click', 'font-size:16px;color:red');
});
}