jquery移除dom元素用的啥

小强姑娘_2848

小强姑娘_2848

2022-03-23

2728人浏览

原创

jquery移除dom元素用:1、remove()方法,可将指定dom元素及其内部的所有内容删除;2、detach()方法,可将指定dom元素及其内部所有内容删除,但不会删除绑定的事件;3、empty()方法,可移除指定后代dom元素。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

在 jQuery 中,想要删除dom元素,我们有以下 3 种方法:remove()、detach( ) 和 empty( )。

1、remove()方法

remove( ) 方法可以将某个元素及其内部的所有内容删除。

$(selector).remove()

示例:

html>


	
		<meta><script></script><script>
	$(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Vue.js

$("li:nth-child(4)").remove() 表示删除 ul 元素下的第 4 个 li 元素。记住,在 jQuery 中,除了 :nth-child() 和 :nth-of-type() 这两个选择器的下标是从 1 开始的,其他所有选择器或 jQuery 方法的下标都是从 0 开始的。

1.gif

2、detach( ) 方法

在 jQuery 中,detach() 和 remove() 的功能虽然相似,都是将某个元素及其内部所有内容删除,但是两者也有明显的区别。

  • remove() 方法用于“彻底”删除元素。所谓的“彻底”,指的是不仅会删除元素,还会把元素绑定的事件删除;

  • detach() 方法用于“半彻底”删除元素。所谓的“半彻底”,指的是只会删除元素,不会把元素绑定的事件删除。

    jQuery 1.12.4
    jQuery 1.12.4

    jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本,由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用,尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

    下载
$(selector).detach()

示例:

html>


	
		<meta><script></script><script>
	$(function () {
            $("li").click(function () {
                alert("欢迎来到PHP中文网!")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").detach();
                $($li).appendTo("ul");
            });
        })
    </script>
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Vue.js

在这个例子中,我们为每一个 li 元素添加一个点击事件,点击任何一个 li 元素都会弹出一个对话框。在我们点击【删除】按钮后,

  • jQuery
  • 这一项就会被添加到 ul 元素内部的末尾处。

    1.gif

    但是这个时候,如果再去点击

  • jQuery
  • 这一项,会发现之前绑定的点击事件存在,会弹出对话框。

    1.png

    3、empty( )方法

    在 jQuery 中,我们可以使用 empty() 方法来“清空”某个后代元素。

    $(selector).empty()

    示例:

    html>
    
    
    	
    		<meta><script></script><script>
    			$(function () {
                $("#btn").click(function () {
                    $("ul li:nth-child(4)").empty();
                });
            })
        </script>
    • HTML
    • CSS
    • JavaScript
    • jQuery
    • Vue.js

    1.gif

    【推荐学习:jQuery视频教程、web前端】

    相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    jquery

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    DBeaver怎么导入数据
    DBeaver怎么导入数据

    DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

    2026.11.05

    0

    12

    DBeaver安全防护教程大全
    DBeaver安全防护教程大全

    DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

    2026.11.05

    0

    12

    DBeaver连接创建与配置教程
    DBeaver连接创建与配置教程

    本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

    2026.11.04

    0

    16

    XORM框架结构体映射与表结构同步
    XORM框架结构体映射与表结构同步

    本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

    2026.11.04

    0

    15

    XORM框架安装配置与数据库连接
    XORM框架安装配置与数据库连接

    本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

    2026.11.04

    0

    15

    XORM框架安装配置与数据库连接
    XORM框架安装配置与数据库连接

    本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

    2026.11.04

    0

    16

    XORM框架安装配置与数据库连接
    XORM框架安装配置与数据库连接

    本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

    2026.11.04

    0

    16

    XORM框架零基础入门教程
    XORM框架零基础入门教程

    本专题梳理XORM框架的入门路径,从框架定位、依赖安装、连接数据库到跑通第一个增删改查示例,讲清Engine初始化、日志开启与项目目录规划,并对比GORM等同类ORM的差异,帮助Go开发者建立整体认知。

    2026.11.04

    0

    15

    Docker Desktop怎么设置端口映射
    Docker Desktop怎么设置端口映射

    本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

    2026.11.03

    20

    18

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery官方API文档
    jQuery官方API文档

    共0课时 | 0人学习

    jQuery 教程
    jQuery 教程

    共42课时 | 16.7万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 19.5万人学习