这篇文章主要介绍javascript删除html元素的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript删除HTML元素的方法:1、删除节点,代码为【removeChild(oldnode)】;2
这篇文章主要介绍javascript删除html元素的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
JavaScript删除HTML元素的方法:1、删除节点,代码为【removeChild(oldnode)】;2、删除列表框下拉菜单的选项,代码为【remove(long index)】。
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
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删除HTML元素的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网精选频道!
--结束END--
本文标题: JavaScript删除HTML元素的方法
本文链接: https://www.lsjlt.com/news/269462.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0