其他分享
首页 > 其他分享> > Educoder jQuery DOM操作 第4关:jQuery删除元素

Educoder jQuery DOM操作 第4关:jQuery删除元素

作者:互联网

任务描述

本关任务:用jQuery删除元素。效果如下:

相关知识

为了完成本关任务,你需要掌握:1.remove(),2.empty()

基本的html结构如下:

  1. <button class="btn">删除内容</button>
  2. <div class="box">
  3. <p class="com first">我是第一行</p>
  4. <p class="com second">我是第二行</p>
  5. <p class="third" id="item">我是第三行</p>
  6. </div>

效果图如下:

remove()

需要实现的效果如下:

如何删除类名为.box的元素呢?这里用remove()方法,实现代码如下:

  1. $(".btn").click(function(){
  2. $(".box").remove();
  3. })

可以看出:remove()是删除被选元素及其子元素。

empty()

需要实现的效果如下:

如何只删除类名为.box子元素呢?这里用empty()方法,实现代码如下:

  1. $(".btn").click(function(){
  2. $(".box").empty();
  3. })

可以看出:empty()是只删除被选元素的子元素。

标签:jQuery,box,Educoder,删除,DOM,元素,remove,如下,empty
来源: https://www.cnblogs.com/Tim161718/p/16325371.html