学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Apache>>经验笔记

jQuery - DOM 操作之删除HTML元素

发布时间:2021-08-07 点击:1

    在jQuery的DOM操作中,想要删除HTML中的节点元素也是很方便的。

    在jQuery中我们可以使用如下两个方法删除HTML节点元素及其子元素。

    • remove() - 删除所选元素(及其子元素)
    • empty() - 从所选元素中删除子元素

    一、使用jQuery的remove()方法删除所选元素的内容包括子元素

    原网页HTML内容:

    <div id='div1'>
    <span>这里是原始数据1</span>
    </div>
    <div id='div2'>
    <span>这里是原始数据2</span>
    </div>

    使用remove()方法如下:

    $("#div1").remove();
    在使用remove()方法后:
    <div id='div2'>
    <span>这里是原始数据2</span>
    </div>
    其中div1和其子元素span都被删除了。

    在remove()方法中可接受一个参数,允许您对被删元素进行过滤。

    用法如下:

    $("div").remove(".css1");
    添加参数后只会删除所有含有css1样式的div数据。

    二、使用jQuery的empty()方法从所选元素中删除子元素

    $("#div1").empty();
    使用方法适合remove()一样的。删除后的数据样式如下:
    <div id='div1'></div>
    <div id='div2'>
    <span>这里是原始数据2</span>
    </div>

    三、jQuery的empty()和remove()方法的区别

    通过上面empty()和remove()方法后剩余的数据样式我们可以发现,其中jQuery的remove()方法删除会将所选中的节点全部删除,包括所选的元素标签,但是jQuery的empty()方法删除数据后会留下所选的元素标签,它只是删除了子节点和所有数据,保留了其所占的位置。

赞一个(0)     踩一个(0)    

相关链接