• 技术文章 >web前端 >js教程

    javascript怎么删除html

    藏色散人藏色散人2021-05-19 11:11:57原创371

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

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

    JavaScript 删除 HTML 元素

    1-删除节点

    <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>

    结果

    1

    2在这里插入图片描述
    在这里插入图片描述

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

    <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('opValue').value);
    			show.options[show.options.length] =  op;
    		}
    		var del = function(){
    			if (show.options.length>0){
    				show.remove(show.options.length-1);
    			}
    		}
    	</script></body>

    结果
    在这里插入图片描述

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

    <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('row').value;
    			row = parseInt(row);
    			if (isNaN(row)){
    				alert("请输入行整数");
    				return false;
    			}
    			var cel = document.getElementById('cel').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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:javascript如何检测网络 下一篇:js怎么改变css属性值
    第16期线上培训班

    相关文章推荐

    • javascript如何改变文本内容• javascript字符串方法有哪些• JavaScript的整除符号是什么• javascript如何检测网络

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网