JS动态删除DIV
页面上有一个添加按钮我按一下就能多出来一个DIV及其下拉菜单每一个DIV的下拉菜单都有删除按钮请问如何实现点该DIV下拉菜单的删除按钮能删除该DIV...
页面上有一个添加按钮 我按一下就能多出来一个DIV及其下拉菜单 每一个DIV的下拉菜单都有删除按钮 请问如何实现 点该DIV下拉菜单的删除按钮能删除该DIV
展开
3个回答
展开全部
<title>Document</title>
<style>
div
{
width:100px;
height:100px;
background: #abcdef;
margin: 2px;
}
#container
{
background: none;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDivContainer=document.getElementById('container');
var oBtn1=document.getElementById('btnAdd');
var aBtn=oDivContainer.getElementsByTagName('input');
oBtn1.onclick=function()
{
var oDiv=document.createElement('div');//创建div
var oButton=document.createElement('input');//创建button
oButton.type='button';
oButton.value="删除";
oDiv.appendChild(oButton);//将button添加到div中
oDivContainer.appendChild(oDiv);//将div添加到页面中
//为创建的button添加单击事件
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].onclick=function()
{
oDivContainer.removeChild(this.parentNode);//从根节点上移除button的父节点，也就是创建的div
}
}
}
}
</script>
</head>
<body>
<input type="button" value="添加" id="btnAdd" />
<div id="container"></div>
</body>
</html>
<style>
div
{
width:100px;
height:100px;
background: #abcdef;
margin: 2px;
}
#container
{
background: none;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDivContainer=document.getElementById('container');
var oBtn1=document.getElementById('btnAdd');
var aBtn=oDivContainer.getElementsByTagName('input');
oBtn1.onclick=function()
{
var oDiv=document.createElement('div');//创建div
var oButton=document.createElement('input');//创建button
oButton.type='button';
oButton.value="删除";
oDiv.appendChild(oButton);//将button添加到div中
oDivContainer.appendChild(oDiv);//将div添加到页面中
//为创建的button添加单击事件
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].onclick=function()
{
oDivContainer.removeChild(this.parentNode);//从根节点上移除button的父节点，也就是创建的div
}
}
}
}
</script>
</head>
<body>
<input type="button" value="添加" id="btnAdd" />
<div id="container"></div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<%--<script src="js/jquery-1.11.1.js"></script>--%>
<script language="javascript">
function aa() {
var thenew = document.createElement('div');
thenew.innerHTML = document.getElementById('lizi').innerHTML;
document.getElementById('bbbb').appendChild(thenew);
}
function cl() {
var div = document.getElementById("bbbb");
if (div.children.length == 0) {
return;
}
div.removeChild(div.children[div.children.length - 1]);
}
</script>
</head>
<body>
<div id="lizi">
remove
<br />
Frist Name:
<input type="text" value="aaaa" name="name[]" />
</div>
<div id="bbbb" style="background-color: #CCCCCC;">
</div>
<a onclick="aa()" href="#">Add new</a> <a onclick="cl()" href="#">remove</a>
</body>
</html>
<head>
<%--<script src="js/jquery-1.11.1.js"></script>--%>
<script language="javascript">
function aa() {
var thenew = document.createElement('div');
thenew.innerHTML = document.getElementById('lizi').innerHTML;
document.getElementById('bbbb').appendChild(thenew);
}
function cl() {
var div = document.getElementById("bbbb");
if (div.children.length == 0) {
return;
}
div.removeChild(div.children[div.children.length - 1]);
}
</script>
</head>
<body>
<div id="lizi">
remove
<br />
Frist Name:
<input type="text" value="aaaa" name="name[]" />
</div>
<div id="bbbb" style="background-color: #CCCCCC;">
</div>
<a onclick="aa()" href="#">Add new</a> <a onclick="cl()" href="#">remove</a>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
精简楼上的
function cls(ob){
ob.parentNode.parentNode.removeChild(ob.parentNode);
}
<div style="float:left" id="2">
<img src="1.png"/><input type="text" id="items" value="请输入" name="2">
<span style="width:22px;border-width:0px;font-family:webdings;" onclick="cls(this)">r</span>
</div>
直接兼容你现在HTML元素的写法
function cls(ob){
ob.parentNode.parentNode.removeChild(ob.parentNode);
}
<div style="float:left" id="2">
<img src="1.png"/><input type="text" id="items" value="请输入" name="2">
<span style="width:22px;border-width:0px;font-family:webdings;" onclick="cls(this)">r</span>
</div>
直接兼容你现在HTML元素的写法
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
