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');

    });

}

jQuery删除DOM节点的更多相关文章

  1. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  2. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  3. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  4. jQuery克隆DOM节点

    jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  5. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  6. js删除dom节点时候索引出错问题

    我们知道删除一个dom节点的时候索引就会发生了改变,甚至是错误,就算jq的ecah也无能为力,所以我们只能自己写个功能了 直接上代码把,不多说 <!DOCTYPE html> <ht ...

  7. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  8. javascript与jquery删除元素节点

    今天工作的时候遇到一个删除的问题,研究了下发现是没有很好的区分js和jquery的删除方法,在此澄清一下 工作的代码如下 // 删除图片 $("#js_takePhotoWrap" ...

  9. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

随机推荐

  1. 利用cookie实现“只弹出一次窗口”的JS代码

    弹出式窗口通常被用来做弹出广告(CPM),其实用弹出式窗口用来做消息通知也是最普遍而且是最有效的方法,但如果每次刷新页面特别是刷新首页都要弹出窗口的话,那绝对是让访问者厌烦的事情. 比如你将上面的脚本 ...

  2. 浏览器兼容问题 chrome iframe location href

    报了个错 var dt2=new Date(d2Arr[0],d2Arr[1],d2Arr[2]); if(dt1>dt2){//比较日期 alert("开始日期不能晚于结束日期!&q ...

  3. Java中Calendar的用法

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Times } span.s1 { font: 13.0px Courier; backgro ...

  4. BZOJ 2276 Temperature

    two-pointer型单调队列.... #include<iostream> #include<cstdio> #include<cstring> #includ ...

  5. 我的云服务之WWW

    云服务器系统是:[root@ip-172-31-27-132 system]# cat /etc/redhat-release Red Hat Enterprise Linux Server rele ...

  6. awesome-deep-learning

    https://github.com/ChristosChristofidis/awesome-deep-learning

  7. tensorflow的Virtualenv安装方式安装

    本文介绍了如何在ubuntu上以virtualenv方式安装tensorflow. 安装pip和virtualenv: # Ubuntu/Linux 64-bit sudo apt-get insta ...

  8. losbyday Linux查找命令

    PS:第一次发表博客,试一下水,晚一点修改文本格式 linux下的命令都存放在/bin /sbin /usr/bin /usr/sbin路径下等echo $PATH which 是用来查询命令存放的路 ...

  9. Android获取手机唯一码

    大部分安卓手机都可以获取手机唯一码,但是有些手机的厂商却禁止了获取手机唯一码的权限,导致我们不能使用手机唯一码作为标识,但遇到一些必须要填的坑,我们也不能不填,所以使用以下方法来填坑,因此我们使用UU ...

  10. iOS搜索框UISearchBar 分类： ios技术 2015-04-03 08:55 82人阅读 评论(0) 收藏

    当你在seachBar中输入字母之前的时候,只是用鼠标选中searchBar的时候,如图 终端输出截图如下:(这个时候调用先shouldBeginEditing,之后调用didBeginEditing ...