前言

我现在总结一下我之前敲代码犯的错误，清除DOM元素，我们开始写代码吧!

HTML

<h1 style="font-size: 18px;font-weight: bold;color:rgba(255,128,128,1)">测试</h1>

		<div id="JiJi">

		</div>

		<input type="button" value="创建邮箱" id="CreateEmail" onclick="CreateEmail()" />

		<input type="button" value="清除邮箱" id="ClearEmail" onclick="ClearEmail()" />

JS

var Email = [

				"@qq.com",

				"@163.com",

				"@gamil.com",

				"@126.com",

				"@yahoo.com",

				"@sina.com",

				"@hotmail.com",

				"@foxmail.com",

			]

			function CreateEmail() {

				for(var i = 0;i< Email.length;i++) {

					document.querySelectorAll("#JiJi")[0].innerHTML += "<p>"+Email[i]+"</p>";				}

			}

			function ClearEmail() {

				 for(var i = 0; i < document.querySelectorAll("#JiJi p").length;i++) {

				 	document.querySelectorAll("#JiJi p")[i].remove();				 }

			}

CreateEmail()方法是创建数组里的数据
ClearEmail()方法是清除页面上创建的DOM元素
我们打开浏览器运行看一下

点击创建邮箱

成功创建出了一些邮箱
我们试一下清除邮箱

我们发现居然没清除成功，这样就违背了我们想要清空邮箱的意愿
看一下清除的代码

for(var i = 0; i < document.querySelectorAll("#JiJi p").length;i++) {

					document.querySelectorAll("#JiJi p")[i].remove();

					}

实际上，我们清除是从头开始清除的，这样清除就会导致每清除一行，下一行DOM元素就会就会向上移动，也就是索引-1，就相当于相隔一行才清除一次DOM,这样是没办法一次性清除完成的，我们必须从DOM的最后一个元素开始清除，毕竟我们是从头创建的，就必须从尾部清除才能清空
改下正确写法

for(var i=document.querySelectorAll("#JiJi p").length-1;i >= 0;i--) {

 	document.querySelectorAll("#JiJi p")[i].remove();

}

/解释for(var i = 创建DOM元素的索引-1;i>=0;i–)
现在再看一下

清除完成了

完整代码

<html>

	<head>

		<meta charset="utf-8" />

		<title>封装JS</title>

	</head>

	<body>

		<h1 style="font-size: 18px;font-weight: bold;color:rgba(255,128,128,1)">测试</h1>

		<div id="JiJi">

		</div>

		<input type="button" value="创建邮箱" id="CreteEmail" onclick="CreteEmail()" />

		<input type="button" value="清除邮箱" id="ClearEmail" onclick="ClearEmail()" />

	</body>

	<script>

		var Email = [

			"@qq.com",

			"@163.com",

			"@gamil.com",

			"@126.com",

			"@yahoo.com",

			"@sina.com",

			"@hotmail.com",

			"@foxmail.com",

		]

		function CreteEmail() {

			for (var i = 0; i < Email.length; i++) {

				document.querySelectorAll("#JiJi")[0].innerHTML += "<p>" + Email[i] + "</p>";

			}

		}

		function ClearEmail() {

			//正确写法

			for (var i = document.querySelectorAll("#JiJi p").length - 1; i >= 0; i--) {

				document.querySelectorAll("#JiJi p")[i].remove();

			}

			//错误写法

			// for(var i = 0; i < document.querySelectorAll("#JiJi p").length;i++) {

			// 	document.querySelectorAll("#JiJi p")[i].remove();

			// }

		}

	</script>

</html>

后言

这错误，新手都会犯，将它写出来，帮助更多的新手 本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进

JS错误写法[清除DOM]的更多相关文章

  1. JS文件写法操作，DOM基本操作

     js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 s ...

  2. HTML5几种常见的错误写法

    本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元 ...

  3. js,JavaScript,a标签onclick传递参数不对，A标签调用js函数写法总结

    错误示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 浏 ...

  4. jquery 给input赋值错误写法

    <script type="text/javascript"> var ue = UE.getEditor('container'); function getCont ...

  5. angular js 自定义js错误处理(Angularjs js error handler)

    使用AngularJS的时候,对JS错误如何自定义处理?(比如用Google Analytics记录angularjs使用中出现的js错误) AngularJS自带一个错误处理service:$exc ...

  6. 捕获JS 错误日志

    最近在做项目的过程中,发现很多JS报错没有引起重视,我就想想把JS错误捕获了,然后展示在我们一个平台上 具体实现代码: window.onerror = function(message, url,  ...

  7. JQuery validate 在IE兼容模式下出现 js错误（成员找不到）的修正:

    JQuery validate 在IE兼容模式下 下出现 js错误(成员找不到)的修正: // Add novalidate tag if HTML5. //this.attr( "nova ...

  8. Fundebug上线Node.js错误监控啦

    作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...

  9. 前端监控系统（二）JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

随机推荐

  1. 如何借助 IDEA 数据库管理工具可视化使用 TDengine？

    什么是IDEA Database管理工具? 这里首先介绍下IDEA,IDEA全称IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的Java开发工具之一. I ...

  2. 预科班D8

    2020.09.16星期三 预科班D8 学习内容: 一.注释 单行注释 ==>用 # 写在上一行或者该行后面 多行注释 ==>用 ''' '''或""" &q ...

  3. SpringBoot-01-快速入门

    SpringBoot 1. 快速入门 什么是Spring 轻量级的Java开源开发框架 为了解决企业级应用开发的复杂性而创建的,简化开发 Spring是如何简化Java开发的 ​ 为了降低Java开发 ...

  4. Linux里隐藏的计算器，你知道它的奥秘吗？

    Linux里隐藏的计算器,你知道它的奥秘吗? 大家都知道,windows下有个计算器工具,我们在工作生活中经常使用到它.但是,你可知Linux下也同样有个计算器吗? 当然,良许说的是命令行下的计算器工 ...

  5. RXJAVA之创建被观察者

    RXJava中提供了多种创建数据源的方式 使用create方法 Observable<String> observable = Observable.create(new Observab ...

  6. 6.Exchanger-交换机

  7. 利用python简单实现unittest

    python3的eval方法 eval() 函数用来执行一个字符串表达式,并返回表达式的值 # 例如 a = [1,2,3,4] b = "a" print(eval(b)) # ...

  8. Lucene索引库维护、搜索、中文分词器

    删除索引(文档) 需求 某些图书不再出版销售了,我们需要从索引库中移除该图书. 1 @Test 2 public void deleteIndex() throws Exception { 3 // ...

  9. Flex、Grid、媒体查询实现响应式布局

    本篇文章主要讲述使用Flex布局.Grid布局以及媒体查询三种方式来实现响应式布局. 文章涉及代码在线coding地址 效果图: 文字描述: 屏幕大小不同,展示列数不同,1-5号按照屏幕大小可展示2到 ...

  10. hystrix 源码分析以及属性的配置

    一.feign与hystix结合 1.1测试环境搭建 架构如图: 非常简单,就是Order服务通过feign调用product服务的一个获取商品信息的一个接口: package com.yang.xi ...