javascript如何刪除html

發(fā)布時(shí)間：2021-05-19 12:31:31 來(lái)源：億速云閱讀：151 作者：小新欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)javascript如何刪除html，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

javascript刪除html的方法：1、通過(guò)removeChild刪除節(jié)點(diǎn)；2、通過(guò)remove刪除指定索引處的選項(xiàng)；3、通過(guò)deleteRow和deleteCell刪除表格中的行和單元格。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5&&html5版，DELL G3電腦

JavaScript 刪除 HTML 元素

1-刪除節(jié)點(diǎn)

removeChild（oldNode）：刪除 oldChild 子節(jié)點(diǎn)

<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">
		被控制的目標(biāo)元素	</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>

結(jié)果

2 javascript如何刪除html

2-刪除列表框下拉菜單的選項(xiàng)

remove（long index）：刪除指定索引處的選項(xiàng)

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

結(jié)果
javascript如何刪除html

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('row').value;
			row = parseInt(row);
			if (isNaN(row)){
				alert("請(qǐng)輸入行整數(shù)");
				return false;
			}
			var cel = document.getElementById('cel').value;
			cel = parseInt(cel);
			if (isNaN(cel)){
				alert("請(qǐng)輸入列整數(shù)");
				return false;
			}
			
			if (row > tb.rows.length || cel> tb.rows[row-1].cells.length){
				alert("要?jiǎng)h除的不在");
				return false;
			}
			tb.rows[row-1].deleteCell(cel-1);
		}
		
	</script></body>

結(jié)果
javascript如何刪除html

javascript是一種什么語(yǔ)言

javascript是一種動(dòng)態(tài)類型、弱類型的語(yǔ)言，基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性并廣泛用于客戶端網(wǎng)頁(yè)開(kāi)發(fā)的腳本語(yǔ)言，同時(shí)也是一種廣泛用于客戶端Web開(kāi)發(fā)的腳本語(yǔ)言。它主要用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

關(guān)于“javascript如何刪除html”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

javascript如何刪除html

2-刪除列表框 下拉菜單的選項(xiàng)

3-刪除表格的行或單元格

javascript是一種什么語(yǔ)言

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

2-刪除列表框下拉菜單的選項(xiàng)