js中如何删除某个元素下面的所有子元素?(两种方法)

时间:2022-04-02 10:04:41

js中如何删除某个元素下面的所有子元素?(两种方法)

一、总结

方法一:通过元素的innerHTML属性

元素element.innerHTML="";

方法二:通过元素的removeChild方法

子元素element.parentNode.removeChild(子元素element);

二、js中如何删除某个元素下面的所有子元素?

问题1:

js删除一个父元素下面的所有子元素

比如
<div id="ok">
<button tpye='button'>111111</button>
<p>22222</p>
<div> <p>31232</p> </div>
</div>
而如果想删除其中的一个应该如何做

解答1:

document.getElementById("ok").innerHTML = "";
用jquery的话更方便

问题2:

js中怎么删除一个标签及其标签下的所有内容?

<ul class="list2" id="dy" >
<li id="xh1">
<img alt="" src="Logo/aaa.jpg" />
<h3><a>aaaaa</a></h3>
<p>aaa111</p>

</li>
<li id="xh2">
<img alt="" src="Logo/aa.jpg" />
<h3><a>bbbbb</a></h3>
<p>bbb111</p>
</li>

</ul>

怎么用代码删除后变成一下效果!
<ul class="list2" id="dy" >
<li id="xh1">
<img alt="" src="Logo/aaa.jpg" />
<h3><a>aaaaa</a></h3>
<p>aaa111</p>
</li>
</ul>

解答2:

var elem=document.getElementById('xh2'); // 按 id 获取要删除的元素

elem.parentNode.removeChild(elem)// 让 “要删除的元素” 的 “父元素” 删除 “要删除的元素”

三、测试题-简答题

1、我要删掉某个标签的所有孩子,然后新加一个新的孩子,也就是将原来的所有孩子替换为一个新的孩子,那么我的操作是什么?

解答:直接获取元素对象,然后innerHTML=孩子标签的html。这个是innerHTML,而不是innerText,说明里面就是HTML。

2、如何获取一个节点的父亲节点的element?

解答:先获取这个节点的element,然后elem.parentNode即可。

3、一个节点如何移除自己的某个孩子?

解答:element.removeChild(孩子的element)。

js中如何删除某个元素下面的所有子元素?(两种方法)的更多相关文章

  1. &lpar;网页&rpar;angular中实现li或者某个元素点击变色的两种方法&lpar;转&rpar;

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  2. SQL Server中灾难时备份结尾日志&lpar;Tail of log&rpar;的两种方法

    转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...

  3. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  4. C&num;统计给定的文本中字符出现的次数,使用循环和递归两种方法

    前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...

  5. Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

    上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事前端工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知 ...

  6. 在Activity中响应ListView内部按钮的点击事件的两种方法

    转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...

  7. JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) ? 1 2 var str = "123" console.log(str.indexOf("2&qu ...

  8. Easy-UI中datebox的默认显示当前日期的最简单的两种方法

    在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...

  9. windows系统中,在当前目录下打开cmd命令行的两种方法

    1.在当前路径地址栏中直接输入‘cmd’,然后回车. 2.在当前路径下,按住‘shift’键同时点击鼠标右键,点击“在此处打开Powershell”. 其实你会发现,两个命令行有很大的区别. cmd: ...

  10. Android中Intent传递对象的两种方法&lpar;Serializable&comma;Parcelable&rpar;

    今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...

随机推荐

  1. Codeforces Round &num;384 &lpar;Div&period; 2&rpar; ABCD

    一场比较简单的div2 电脑出了点问题 所以在比赛中理论ac了ACD 除了爆int这种事情之外.. A 一个人想从a到b 移动的花费这么定义 如果初始点和到达点类型相同 就不花钱 反之花距离差的绝对值 ...

  2. win7 windows server 2008R2下 https SSL证书安装的搭配&lpar;搭配https ssl本地测试环境&rpar;

    原文:http://www.cnblogs.com/naniannayue/archive/2012/11/19/2776948.html 要想成功架设SSL安全站点关键要具备以下几个条件. 1.需要 ...

  3. POJ2632Crashing Robots

    做模拟题做的我直接睡着了,题并不难,就是一个细心的问题,有一些细节问题注意了就差不多了,代码写的精美的一般找错误也好找一些,应该学着些好看的代码 #include<cstdio> #inc ...

  4. MyGeneration模板生成NHibernate映射文件和关系&lpar;one-to-one&comma;one-to-many&comma;many-to-many&rpar;

    MyGeneration的几个NHibernate模板功能已经很强,但还是存在些问题.例如:Guid主键支持不佳,代码不易修改,不支持中文注释等等.所以我决定自己来改写此模版.我把一部分通用的函数提取 ...

  5. 传统XmlDocument操作

    需要引用的命名空间: using System.Xml; 常用的类:XmlDocument.XmlElement.XmlNode.XmlNodeList 一.使用XmlDocument创建xml // ...

  6. real-time application

    http://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWindowsAreYouMad.aspx ...

  7. favicon&period;ico的使用方法

    favicon.ico怎么来,就自己决定了. 虽说是放在网站根目录下就行了, 但最好是放在网站images目录下,方便统一管理. 然后在head.tpl.php 中的<head></ ...

  8. 《算法导论》 — Chapter 7 高速排序

    序 高速排序(QuickSort)也是一种排序算法,对包括n个数组的输入数组.最坏情况执行时间为O(n^2). 尽管这个最坏情况执行时间比較差.可是高速排序一般是用于排序的最佳有用选择.这是由于其平均 ...

  9. 微信小程序下拉刷新和上拉加载

    小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true& ...

  10. MySQL查询1

    1.将下列语句复制到sqlyog的询问栏 /*!40101 SET NAMES utf8 */; create table `t_student` ( `id` double , `stuName` ...