parentNode, removeChild, nextSibling, firstChild的练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{font-size:12px;}
.peos{width:60px;height:20px;text-align:center;line-height:20px;float:left;border:1px solid #ccc;background:#fff;padding:2px;margin:0 5px;}
a.close{ width:10px;height:20px;margin-left:5px;float:right;text-indent:-9999em;overflow:hidden;background:url(../images/close.png) no-repeat center center;cursor:pointer;}
label{float:left;border:1px solid #ccc;margin:0 5px;}
label input{vertical-align:middle;}
.clear{clear:both;}
.inputtext{}
.activediv{height:30px;padding:2px 0;line-height:30px;border:1px solid #ccc;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBut = document.getElementById('cBut');
var oTxt = document.getElementById('cValue');
oBut.onclick = function(){
oTxt.value += 'aaaa,';
}
var oMem = document.getElementById('member');
var oRadio = oMem.getElementsByTagName('input');
for(var i=0;i<oRadio.length;i++){
oRadio[i].onclick = function(){
//alert(this.nextSibling.nodeValue);
oTxt.innerHTML += '<div class="peos"><a href="javascript:///" class="close" onclick="removeObj(this)">移除</a>' + this.nextSibling.nodeValue + '</div>';
}
}
}
function removeObj(element){
var oTar = element.parentNode.parentNode;
if(oTar){
oTar.removeChild(element.parentNode);
}
}
</script>
</head>
<body>
<div id="member">
<label for="m01"><input type="radio" name="mb" id="m01" />张三丰</label>
<label for="m02"><input type="radio" name="mb" id="m02" />李四光</label>
<label for="m03"><input type="radio" name="mb" id="m03" />赵强荧</label>
</div>
<div class="clear"></div><br />
<input type="submit" id="cBut" value="复制" /><br />
<div class="activediv">
<div style="float:left;" id="cValue" ></div>
<input type="text" style="border:1px;float:left;" name="" id="" />
</div>
</body>
</html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述