您的位置：首页 > Web前端 > JavaScript

javascript之动态添加和删除按钮节点

2017-11-10 13:51 323 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.file-item{
width: 300px;
height: 30px;
margin:5px 0;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h1>文件上传</h1>
<input type="file" name="file" /><button id='btn'>add more...</button>
<div id="file-box">
</div>
<script>
$('btn').addEventListener('click',function(){
//创建DIV
var fileItem = document.createElement('div');
fileItem.className = 'file-item';

//创建input元素，type为file,name为file
var input = document.createElement('input');
input.type = input.name = 'file';
fileItem.appendChild(input);

//创建按钮
var btn = document.createElement('button');
btn.textContent = '删除';
fileItem.appendChild(btn);

$('file-box').appendChild(fileItem);

//为按钮设置点击事件(删除)
btn.addEventListener('click',function(){
//删除当前按钮节点所在父节点
//					$('file-box').removeChild(this.parentNode);
this.parentNode.remove();
})

});

function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML css javascript
相关文章推荐
新的分享
章节导航