iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >JavaScript删除HTML元素的方法
  • 745
分享到

JavaScript删除HTML元素的方法

2023-06-14 08:06:49 745人浏览 泡泡鱼
摘要

这篇文章主要介绍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

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>

结果

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("请输入行整数");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元素的方法

以上是“JavaScript删除HTML元素的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网精选频道!

--结束END--

本文标题: JavaScript删除HTML元素的方法

本文链接: https://www.lsjlt.com/news/269462.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript删除HTML元素的方法
    这篇文章主要介绍JavaScript删除HTML元素的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript删除HTML元素的方法:1、删除节点,代码为【removeChild(oldNode)】;2...
    99+
    2023-06-14
  • javascript删除子元素的方法
    本篇内容主要讲解“javascript删除子元素的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript删除子元素的方法”吧! ...
    99+
    2022-10-19
  • javascript删除数组元素的方法
    这篇文章给大家分享的是有关javascript删除数组元素的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。删除方法:1、length属性从数组末尾删除元素,语法“数组名.length=值”;2、delete关...
    99+
    2023-06-15
  • javascript数组中删除元素的方法
    这篇文章主要介绍javascript数组中删除元素的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!javascript删除数组元素的方法:1、使用splice()函数,语法格式“arr.splice(开始位置,删...
    99+
    2023-06-14
  • javascript获取元素并删除的方法
    本篇内容主要讲解“javascript获取元素并删除的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript获取元素并删除的方法”吧!javas...
    99+
    2022-10-19
  • JavaScript更改元素、删除元素、拼接数组的方法
    今天小编给大家分享一下JavaScript更改元素、删除元素、拼接数组的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所...
    99+
    2022-10-19
  • JavaScript删除数组元素的方法指南
    目录删除数组元素之splice()删除数组元素之filter()删除数组元素之pop()删除数组元素之shift()删除数组元素之splice()、slice()和conca ...
    99+
    2023-05-19
    JavaScript删除数组元素方法 JavaScript删除数组元素 JavaScript 数组 元素
  • javascript中数组元素删除方法有哪些
    这篇文章主要讲解了“javascript中数组元素删除方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript中数组元素删除方法有哪些”吧!delete方法:delete...
    99+
    2023-06-03
  • jquery如何删除html元素
    这篇文章主要介绍了jquery如何删除html元素,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。删除方法:1、使用remove()方法,可以删除被选元素及其子元素,语法“$(...
    99+
    2023-06-15
  • javascript如何删除tr元素
    这篇文章主要介绍“javascript如何删除tr元素”,在日常操作中,相信很多人在javascript如何删除tr元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”java...
    99+
    2022-10-19
  • 如何在html中删除元素
    如何在html中删除元素?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合...
    99+
    2023-06-14
  • golang map删除元素的方法是什么
    在Go语言中,可以使用`delete()`函数来删除map中的元素。`delete()`函数的语法如下:```godelete(ma...
    99+
    2023-10-12
    golang
  • python list删除元素的方法有哪些
    Python中删除列表元素的方法有以下几种:1. 使用`del`关键字```pythonmy_list = [1, 2, 3, 4,...
    99+
    2023-09-25
    Python
  • Python 删除字典元素的4种方法
    1. Python字典的clear()方法(删除字典内所有元素)#!/usr/bin/python # -*- coding: UTF-8 -*- dict = {'name': '我的博客地址', 'alexa': 10000, 'ur...
    99+
    2023-01-31
    种方法 字典 元素
  • Java中List删除元素方法总结
    文章目录 Java中List删除元素删除方式总览for循环顺序遍历删除for循环反向遍历删除使用Iterator迭代器删除使用lambda表达式删除列表元素(推荐)使用方法引用删除列表元素 ...
    99+
    2023-09-25
    java list 开发语言
  • javascript如何删除元素属性
    小编给大家分享一下javascript如何删除元素属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!javascript是一种什么语言javascript是一种动...
    99+
    2023-06-14
  • javascript怎么删除数组元素
    JavaScript 是一种高级的编程语言,用于在网页中添加交互性和动态性内容。其中,操作数据类型的能力是 JavaScript 如此广受欢迎和重要的原因之一。当我们在处理数据的过程中,经常需要添加、读取和删除一个集合里的元素。比如,当一个...
    99+
    2023-05-14
  • javascript如何删除数组元素
    javascript如何删除数组元素?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。在JavaScript中,除了Object之外,Array类型(数组)恐怕就是...
    99+
    2023-06-14
  • JavaScript怎么添加删除元素
    小编给大家分享一下JavaScript怎么添加删除元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JS添加和删除元素的方法:1、使用“appendChild(&...
    99+
    2023-06-14
  • 怎么在JavaScript中使用shift()方法删除数组元素
    这期内容当中小编将会给大家带来有关怎么在JavaScript中使用shift()方法删除数组元素,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。javascript是一种什么语言javascript是一种动...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作