Home  >  Article  >  Web Front-end  >  How to delete html in javascript

How to delete html in javascript

藏色散人
藏色散人Original
2021-05-19 11:11:575818browse

Javascript method to delete html: 1. Delete nodes through removeChild; 2. Delete the option at the specified index through remove; 3. Delete rows and cells in the table through deleteRow and deleteCell.

How to delete html in javascript

The operating environment of this article: windows7 system, javascript1.8.5&&html5 version, DELL G3 computer

JavaScript delete HTML element

1-Delete node

  • removeChild(oldNode): Delete oldChild child node
<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>

RESULT

1

2How to delete html in javascript
How to delete html in javascript

2- Remove the option of the list box drop-down menu

  • remove(long index): Remove the option at the specified 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>

Result
How to delete html in javascript

3-Delete rows or cells of the table

  • deleteRow(long index): Delete the row at index index in the table
  • deleteCell(long index) : Delete the cell at the index of a row
<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>

Result
How to delete html in javascript

Recommended study: "javascript Advanced Tutorial

The above is the detailed content of How to delete html in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn