JavaScript如何刪除HTML元素
JavaScript刪除HTML元素的方法：1.刪除節點，程式碼為【removeChild（oldNode）】；2、刪除列錶框下拉選單的選項，程式碼為【remove（long index）】。
本教學操作環境：windows7系統、javascript1.8.5版，DELL G3電腦。
JavaScript刪除HTML元素的方法：
1、刪除節點
removeChild（oldNode )：刪除oldChild 子節點
<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>結果
#1
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>
#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("请输入行整数");
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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用 onclick 執行 PHP 函數
Feb 29, 2024 pm 04:31 PM
我們也將介紹另一種使用Jquery函式庫透過onclick()事件執行PHP函數的方法。此方法呼叫一個javascript函數，該函數將在網頁中輸出php函數的內容。我們也會示範另一種使用onclick()事件執行PHP函數的方法，使用純JavaScript呼叫PHP函數。本文將介紹一種執行PHP函數的方法，使用GET方法傳送URL中的數據，並使用isset()函數檢查GET數據。如果設定了資料並執行函數，則此方法呼叫PHP函數。使用jQuery透過onclick()事件執行PHP函數我們可以使用
html怎麼讀取excel數據
Mar 27, 2024 pm 05:11 PM
html讀取excel資料的方法：1.使用JavaScript庫讀取Excel資料；2、使用伺服器端程式語言讀取Excel資料。
JS中appendChild與append區別
Feb 20, 2024 pm 06:57 PM
JS中appendChild與append區別，需要具體程式碼範例在JavaScript中，當我們需要動態地向DOM（文檔物件模型）中新增子元素時，我們通常會使用appendChild和append這兩個方法。雖然它們的目的都是為了在父元素中添加子元素，但在使用上卻有一些區別。一、appendChild方法appendChild方法是DOM節點物件的方法之一，用
dreamweaver換行符號是什麼
Apr 08, 2024 pm 09:54 PM
Dreamweaver中使用<br>標籤建立換行，透過選單、快速鍵或直接鍵入插入。可結合CSS樣式建立特定高度空白行。在某些情況下，使用<p>標籤替代<br>標籤更合適，因為它可自動建立段落間空白行並套用樣式控制。
使用CSS Transform進行元素的變換
Feb 24, 2024 am 10:09 AM
CSS中Transform的用法CSS的Transform屬性是一種非常強大的工具，可以對HTML元素進行平移、旋轉、縮放和傾斜等操作。它可以大大改變元素的外觀，使網頁更有創意和動態。在本文中，我們將詳細介紹Transform的各種用法，並提供具體的程式碼範例。一、平移（Translate）平移是指將元素沿著x軸和y軸移動指定的距離。它的語法如下：tran
jQuery實作判斷元素內是否存在子元素的簡單方法
Feb 28, 2024 pm 03:21 PM
jQuery是一個廣泛使用的JavaScript函式庫，它提供了許多方便的方法來操作HTML元素。在開發網頁的過程中，常常會遇到需要判斷一個元素內是否存在子元素的情況。在本文中，我們將介紹如何使用jQuery實作這個功能，並提供具體的程式碼範例。要判斷一個元素內是否存在子元素，我們可以使用jQuery的children()方法。 children()方法用於取得匹配
csshover怎麼使用
Feb 23, 2024 pm 12:06 PM
CSS中的hover偽類是一個非常常用的選擇器，它允許我們在滑鼠懸停在元素上時改變其樣式。本文將為大家介紹hover的用法，並提供具體的程式碼範例。一、基本用法要使用hover，我們需要先為該元素定義一個樣式，然後再使用:hover偽類來製定滑鼠懸停時對應的樣式。例如，我們有一個button元素，當滑鼠懸停在按鈕上時，我們希望按鈕的背景色變為紅色，文字顏色變為白
