집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 HTML을 삭제하는 방법

자바스크립트에서 HTML을 삭제하는 방법

藏色散人원래의: 2021-05-19 11:11:575887검색

JavaScript를 사용하여 HTML을 삭제하는 방법: 1. RemoveChild를 통해 노드를 삭제합니다. 2. 제거를 통해 지정된 인덱스에서 옵션을 삭제합니다. 3. deleteRow 및 deleteCell을 통해 테이블의 행과 셀을 삭제합니다.

이 문서의 운영 환경: windows7 시스템, javascript1.8.5&&html5 버전, DELL G3 컴퓨터

JavaScript HTML 요소 삭제

1-노드 삭제

자식 제거( 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>

Result

2 자바스크립트에서 HTML을 삭제하는 방법

2-목록 상자 드롭다운 메뉴 옵션 제거

remove(긴 인덱스): 제거 지정된 인덱스의 옵션

<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
자바스크립트에서 HTML을 삭제하는 방법

3 - 테이블의 행 또는 셀 삭제

deleteRow(long index): 테이블의 인덱스에 있는 행을 삭제
deleteCell(long 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>

Result
자바스크립트에서 HTML을 삭제하는 방법

권장 학습: "javascript 고급 튜토리얼"

위 내용은 자바스크립트에서 HTML을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트가 네트워크를 감지하는 방법다음 기사：자바스크립트가 네트워크를 감지하는 방법