jQuery怎么删除元素节点?

1、使用empty()删除

empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。

<body>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
        $("button").on('click', function() {
            //通过empty移除了当前div元素下的所有p元素
            //但是本身id=test的div元素没有被删除
            $("#test").empty()
        })
    </script>
</body>

2、使用remove()删除

remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

<body>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通过点击jQuery的remove移除元素</button>
    
    <script type="text/javascript">
        $("button:first").on('click', function() {
            //删除整个 class=test1的div节点
            $(".test1").remove()
        })
    </script>
</body>

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点

<body>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通过点击jQuery的remove移除指定元素</button> 
    
    <script type="text/javascript">
       $("button:last").on('click', function() {
            //找到所有p元素中,包含了3的元素
            //这个也是一个过滤器的处理
            $("p").remove(":contains('3')")
        })
    </script>
</body>

3、使用detach()删除

如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理

1.png

Image placeholder
前端答疑
未设置
  64人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery如何删除元素?

jquery如何删除元素?如需删除元素和内容,一般可使用以下两个jQuery方法:●remove()-删除被选元素(及其子元素)●empty()-从被选元素中删除子元素1、remove()方法:删除被

jQuery怎么删除select选项?

jQuery怎么删除select选项?一、使用伪类选择器、属性选择器+remove()方法删除select选项$("#select_idoption:last").remove();//删除Selec

jquery怎么判断元素是第几个?

jquery怎么判断元素是第几个?假设有下面这样一段HTML代码: jQuery判断当前元素是第几个元素示例 jQuery获取第N个元素示例 jQuery选择器示例 如果我们点击任何一个li标签,想知

jquery怎么判断元素是否存在?

使用JQuery想要判断元素是否存在,可以使用jQuery.length属性来实现。当DOM中存在特定元素时触发某个事件,那么就可以使用jQuery.length属性来确定元素是否存在。下面我们就结合

jquery怎么获取第几个元素?

在jquery中,可以使用eq()方法找到第几个元素或第N个元素,jquery中eq()的使用如下:eq()选择器选取带有指定index值的元素。index值从0开始,所有第一个元素的index值是0

jQuery怎样获取同级元素?

jQuery怎样获取同级元素?在jquery中,获得同级元素的方法一般有七个,分别是siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、p

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jquery如何判断对象是否获取焦点?

jquery如何判断对象是否获取焦点?jquery判断对象获取焦点可以使用$(selector).is(":focus")。当对象具有焦点时返回为true,否则返回为false。语法:$(select

jquery怎么写ajax?

jquery怎么写ajax?两种在客户端和服务器端进行请求-响应的常用方法是:GET和POST。GET-从指定的资源请求数据POST-向指定的资源提交要处理的数据GET基本上用于从服务器获得(取回)数

jquery怎么遍历json数组?

jquery怎么遍历json数组?jquery遍历集合可以使用$.each(集合,回调函数)方法,//这里直接使用Array来构造json数组,服务器返回的数据可以使用JSON.parse()函数进行

jquery怎么获取a标签href的值?

jquery怎么获取a标签href的值?href是a标签的一个属性,获取属性的值,在jquery中使用attr()方法。获取a标签的href属性就是$('a').attr('href')语法:$(se

jQuery :empty怎么用?

jQuery:empty怎么用?作用::empty选择器选取空的元素。空元素指的是不包含子元素或文本的元素。语法:$(":empty")(推荐学习:jQuery教程手册)jquery:empty选择器

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

jquery怎么操作json?

使用jquery中的$.parseJSON()将字符串转为json对象,它对json数据格式的要求较高,必须要双引号包围起来格式:$.parseJSON(string)例如: varjsonStr='

jquery怎么禁用a标签?

jquery怎么禁用a标签?1、使用attr()方法删除a标签的链接,并重新设置click事件。$("a").each(function(){ $(this).css("cursor","defaul

jquery怎么操作select?

jquery怎么操作select?jquery操作select分为获取option的值、删除option、增加option、获取option的长度、清空select、判断select框中是否存在某个值

jquery怎么判断对象是否为空?

jquery怎么判断对象是否为空?jquery的isEmptyObject方法可以判断对象是否为空此方法是jquery将forin进行的封装(相关课程推荐:jQuery教程)vardata={}; v

jquery怎么设置checkbox不选中?

jquery怎么设置checkbox不选中?jquery对checkbox进行操作需要使用prop()方法。1、设置不选中:$("#my-checkbox").prop("checked",false

ie不兼容jquery怎么办?

解决方法:1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要兼容低版本的IE版本,建议使用原

jQuery怎么跳转页面?

jQuery怎么跳转页面?1、使用Jquery来写JS脚本代码,所以需要在页面里先引入脚本库文件。2、html很简单,一个按钮,用来触发跳转的,并且注意的是当前页面是叫‘页面A’的。3、然后编写JS脚

jquery怎么下载?

jquery怎么下载?jQuery的版本有很多,大家在选择版本的时候,一般原则是越新越好,但其实不然,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念。(推荐:jQ

Jquery怎么让contains不区分大小写?

Jquery怎么让contains不区分大小写?默认的Jquerycontains方法是区分大小写的,以下方法可以使contains不区分大小写(在匹配时将要匹配的元素内容全部转换成小写再进行匹配)/

jquery怎么判断input是否为空?

jquery怎么判断input是否为空?首先需要通过val()函数获取input框的内容,然后通过比较是否和“”空字符串相等,或者字符串长度是否等于0,来进行判断。1、判断input内容是否等于空字符

jquery怎么遍历?

什么是遍历?jQuery遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。下图展示了一个家族树。通过jQ

jquery怎么获取name属性值?

新建一个html文件,命名为test.html,用于讲解jquery中怎么获取元素的name属性。在test.html文件内,在p标签内,使用input标签创建一个文本框,并设置其id为mytxt,主