Rumah >hujung hadapan web >tutorial js >JavaScript如何删除HTML元素

JavaScript如何删除HTML元素

coldplay.xixi
coldplay.xixiasal
2021-03-30 11:43:326038semak imbas

JavaScript删除HTML元素的方法:1、删除节点,代码为【removeChild(oldNode)】;2、删除列表框下拉菜单的选项,代码为【remove(long index)】。

JavaScript如何删除HTML元素

本教程操作环境: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

6aee9cfd5dbc69bd79b1cd93a088499.png

2

79552f573fd194488dd953bff520456.png

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(&#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>

结果

abf6ddf53fb543997003c0bcd4fb16b.png

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(&#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>

结果

1f48214cebc5526fc9ce795e886851b.png

相关免费学习推荐:javascript视频教程

Atas ialah kandungan terperinci JavaScript如何删除HTML元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:javascript怎么清除缓存Artikel seterusnya:如何关闭javascript网页