<style>
div
{
width:100px;
height:100px;
background: #abcdef;
margin: 2px;
}
#container
{
background: none;
}
</style>
<script type="text/javascript">
windowonload=function()
{
var oDivContainer=documentgetElementById('container');
var oBtn1=documentgetElementById('btnAdd');
var aBtn=oDivContainergetElementsByTagName('input');
oBtn1onclick=function()
{
var oDiv=documentcreateElement('div');//创建div
var oButton=documentcreateElement('input');//创建button
oButtontype='button';
oButtonvalue="删除";
oDivappendChild(oButton);//将button添加到div中
oDivContainerappendChild(oDiv);//将div添加到页面中
//为创建的button添加单击事件
for(var i=0;i<aBtnlength;i++)
{
aBtn[i]onclick=function()
{
oDivContainerremoveChild(thisparentNode);//从根节点上移除button的父节点,也就是创建的div
}
}
}
}
</script>
</head>
<body>
<input type="button" value="添加" id="btnAdd" />
<div id="container"></div>
</body>
</html>
最好给需要删除的div元素定义一个ID,以方便对其进行 *** 作;
注意JS中是没有remove();方法的,在jquery中就可以直接使用 $("#divID")remove();移除该元素;这样非常方便、简单。
js中的话要通过获取该元素的父级元素,再调用removeChild(要删除的元素);
测试demo:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)