溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript刪除HTML元素的方法

發(fā)布時間：2021-03-30 12:40:52 來源：億速云 閱讀：916 作者：小新 欄目：web開發(fā)

這篇文章主要介紹JavaScript刪除HTML元素的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

JavaScript刪除HTML元素的方法：1、刪除節(jié)點，代碼為【removeChild（oldNode）】；2、刪除列表框下拉菜單的選項，代碼為【remove（long index）】。

JavaScript刪除HTML元素的方法：

1、刪除節(jié)點

  • removeChild（oldNode）：刪除 oldChild 子節(jié)點

<body id="test">
<input id="add" type="button" value="增加" disabled onclick="add();"/>
<input id="del" type="button" value="刪除"  onclick="del();"/>
<div id="target" style="width:240px;height:50px;border:1px solid black">
被控制的目標元素
</div>
<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é)果

1

JavaScript刪除HTML元素的方法

2

JavaScript刪除HTML元素的方法

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('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("請輸入行整數(shù)");
return false;
}
var cel = document.getElementById('cel').value;
cel = parseInt(cel);
if (isNaN(cel)){
alert("請輸入列整數(shù)");
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>

結(jié)果

JavaScript刪除HTML元素的方法

以上是“JavaScript刪除HTML元素的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手