js如何动态删除指定id系列元素？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何动态删除指定id系列元素？相关的知识，希望对你有一定的参考价值。
<div id=a><div id=b></div><div id=c1></div><div id=c2></div><div id=c9></div></div>
删除所有id=c*的层，注意*是数字，但不一定是顺序数字，要求点击删除按钮时同时删除所有id=c*的层
<div id=a><div id=b></div><div id=c1></div><div id=c2></div><div id=c9></div></div>
<script>
del.onclick=()=>document.querySelectorAll("div#a div[id^=c]").forEach(e=>e.remove());
</script> 参考技术B <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c1"></div>
<div id="c2"></div>
</div>
</body>
<script>
document.querySelectorAll("#a div").forEach(item =>
if (item.getAttribute("id").indexOf("c") != -1)
item.remove()
)
</script>
</html>
请采纳
追问item =>是什么意思？看不懂，和楼上的比哪个好用，有啥区别
追答item指的是dom元素，我的更好用，如果c1改成c7,他的方式就会报错
请采纳
id="c*"数字不一定是顺序的，或者是任意数字的可以用吗，如果试成功了就采纳你的
追答可以用
请采纳
删除可以单击按钮一次性删除全部吗，你这样设置的只能一个一个删
追答已经是遍历删除了
截图你要删除的元素
删除
单击删除按钮，一次性删除等id=c*层
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="del">删除</button>
<div id="a">
<div id="b"></div>
<div id="c1"></div>
<div id="c4"></div>
</div>
</body>
<script>
document.querySelector("#del").onclick = () =>
document.querySelectorAll("#a div").forEach(item =>
if (item.getAttribute("id").indexOf("c") != -1)
item.remove()
)
</script>
</html>
请采纳
动态的添加或者删除指定元素代码实例
动态的添加或者删除指定元素代码实例:
本章节介绍一段代码实例，能够动态的添加或者删除指定的元素，这里不管实际应用中此代码出现的概率有多大，只在于如何实现类似的功能，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .container{ width:1000px; margin:0 auto; } .top{ height:25px; line-height:25px; } .top select{ width:80px; height:22px; line-height:22px; } .add{line-height:30px;} li{list-style:none;} span{ cursor:pointer; color:red; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("input").click(function(){ var getval=$("select").val(); $(".add").append(‘<li>‘+getval+‘<span>X</span></li>‘); }); }); $("span").live("click",function(){ $(this).parent().remove(); }); </script> </head> <body> <div class="container"> <div class="top"> <select> <option>蚂蚁部落一</option> <option>蚂蚁部落二</option> <option>蚂蚁部落三</option> <option>蚂蚁部落四</option> <option>蚂蚁部落五</option> </select> <input value="查看效果" type="button"/> </div> <div class="add"></div> </div> </body> </html>
上面的代码中，点击按钮可以实现添加一个li元素，li元素中的内容就是选中的option项的文本内容，点击新添加元素的尾部的红色叉号，可以删除当前元素，下面就介绍一下它的实现过程。
一.代码注释:
1.$(function(){})，文档结构完全加载完毕再去执行函数中的代码。
2.$("input").click(function(){})，为按钮注册click事件处理函数。
3.var getval=$("select").val()，获取select下拉菜单的value值，也就选中项的value值，如果otpion项没有规定value属性值，那么text文本内容将作为value属性值。
4.$(".add").append(‘<li>‘+getval+‘<span>X</span></li>‘)，为class属性值为add的元素追加新的内容。
5.$("span").live("click",function(){})，为span元素注册click事件处理函数，这里live函数建议用on替代。
6.$(this).parent().remove()，删除当前元素的父元素，也就是li元素。
二.相关阅读:
1.append()函数可以参阅jQuery的append()方法一章节。
2.live()函数可以参阅jQuery的live()函数的用法介绍一章节。
3.parent()函数可以参阅jQuery的parent()方法一章节。
4.remove()函数可以参阅jQuery的remove()方法一章节。
5.on()函数可以参阅jquery的on()、bind()、live()和delegate()区别简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14451
更多内容可以参阅:http://www.softwhy.com/jquery/
以上是关于js如何动态删除指定id系列元素？的主要内容，如果未能解决你的问题，请参考以下文章