javascript怎么删除html-js教程-PHP中文网

首页

web前端

js教程

javascript怎么删除html

藏色散人

May 19, 2021 am 11:11 AM

javascript

javascript删除html的方法：1、通过removeChild删除节点；2、通过remove删除指定索引处的选项；3、通过deleteRow和deleteCell删除表格中的行和单元格。

javascript怎么删除html

本文操作环境：windows7系统、javascript1.8.5&&html5版，DELL G3电脑

JavaScript 删除 HTML 元素

1-删除节点

removeChild（oldNode）：删除 oldChild 子节点

<body id="test">

	<input id="add" type="button" value="增加" disabled onclick="add();"/>
	<input id="del" type="button" value="删除"  onclick="del();"/>
	<p id="target" style="width:240px;height:50px;border:1px solid black">
		被控制的目标元素	</p>
	
	<script>
		var body = document.getElementById("test");
		var target = document.getElementById("target");
		var add = function(){
			body.appendChild(target);
			document.getElementById("add").disabled="disabled";
			document.getElementById("del").disabled="";
		}
		var del = function(){
			body.removeChild(target);
			document.getElementById("del").disabled="disabled";
			document.getElementById("add").disabled="";
		}
	</script></body>

结果

2 在这里插入图片描述

2-删除列表框下拉菜单的选项

remove（long index）：删除指定索引处的选项

<body id="test">
	<input id="opValue" type="text" />
	<input id="add" type="button" value="增加"  onclick="add();"/>
	<input id="del" type="button" value="删除"  onclick="del();"/>
	<select id="show" size="8" style="width:180px"></select>
	
	<script>
		var show = document.getElementById("show");
		
		var add = function(){
			var op = new Option(document.getElementById(&#39;opValue&#39;).value);
			show.options[show.options.length] =  op;
		}
		var del = function(){
			if (show.options.length>0){
				show.remove(show.options.length-1);
			}
		}
	</script></body>

结果
在这里插入图片描述

3-删除表格的行或单元格

deleteRow(long index): 删除表格中 index 索引处的行
deleteCell(long index): 删除某行 index 索引处的单元格

<body >
	<input id="delrow" type="button" value="删除表格最后一行"  onclick="delrow();"/>
	<input id="delcell" type="button" value="删除最后一行最后一格"  onclick="delcell();"/><br />
	
	删除第<input id="row" type="text" size="2" />行,
	第<input id="cel" type="text" size="2" />列	<input id="chg" type="button" value="删除" onclick="change()"/>
	
	
	<table id="test" border="1" style="width:500px ;">
	 <caption> java</caption>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
		</tr>
	</table>
	
	<script>
		var tab = document.getElementById("test");
		
		var delrow = function(){
			if (tab.rows.length >0){
				tab.deleteRow(tab.rows.length-1);
			}
		}
		var delcell = function(){
			var rowList = tab.rows;
			var lastRow = rowList.item(rowList.length-1);
			if (lastRow.cells.length >0){
				lastRow.deleteCell(lastRow.cells.length -1);
			}
		}
		var change = function(){
			var tb = document.getElementById("test");
			var row = document.getElementById(&#39;row&#39;).value;
			row = parseInt(row);
			if (isNaN(row)){
				alert("请输入行整数");
				return false;
			}
			var cel = document.getElementById(&#39;cel&#39;).value;
			cel = parseInt(cel);
			if (isNaN(cel)){
				alert("请输入列整数");
				return false;
			}
			
			if (row > tb.rows.length || cel> tb.rows[row-1].cells.length){
				alert("要删除的不在");
				return false;
			}
			tb.rows[row-1].deleteCell(cel-1);
		}
		
	</script></body>

结果
在这里插入图片描述

推荐学习：《javascript高级教程》

以上是javascript怎么删除html的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。