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 style="margin:150px;"> <div id="div001">div001</div> <div id="div002">div002</div> <div id="div003">div003</div> <div> <button id="btn001">click me to use remove()</button> <button id="btn002">click me to use remove(selector)</button> <button id="btn003">click me to use detach()</button> <button id="btn004">click me to use detach(selector),这个有问题</button> <button id="btn005">click me to use empty()</button> <button id="btn006">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'); }); }