ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-05-30 00:00:54  阅读:233  来源: 互联网

标签:jQuery box Educoder 删除 DOM 元素 remove 如下 empty


任务描述

本关任务:用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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有