废话不多说先上效果图 ， 点击边框外的按钮对应显示在边框内， 当点击小叉叉的时候消失 ， 简单的运用js的创建节点 以及删除节点
先写一下css代码：
代码语言：javascript复制.odiv {
width: 300px;
height: 300px;
border: 1px solid #999;
margin: 0 auto;
}
.btnGlup {
/*width: 100px;*/
height: 50px;
text-align: center;
line-height: 50px;
}
.odiv p {
width: 60px;
height: 30px;
float: left;
margin-left: 10px;
border: 1px solid #999;
line-height: 30px;
}
.odiv span {
float: right;
font-weight: 900;
}接下来是html代码：
代码语言：javascript复制 <div class="odiv">
</div>
<div class="btnGlup">
<button>语文</button>
<button>数学</button>
<button>英语</button>
<button>历史</button>
<button>地理</button>
<button>政治</button>
</div>
原生js的增加节点及删除节点操作
// 获取节点
var oBtn=document.querySelectorAll("button")
var odiv=document.querySelector(".odiv")
for (var i=0 ;i<oBtn.length; i ) {
//点击按钮时床架标签 及删除按钮
oBtn[i].onclick=function(){
var creatP=document.createElement("p")
var creatX=document.createElement("span")
// 获取文本
var theword=this.innerText
//添加文本内容
creatX.innerHTML="x"
creatP.innerHTML=theword
creatP.appendChild(creatX)
odiv.appendChild(creatP)
//获取删除按钮节点
var oSpan=document.querySelectorAll(".odiv span")
for (var i=0 ;i<oSpan.length;i ) {
//点击删除按钮时删除元素
oSpan[i].onclick=function(){
this.parentNode.remove()
}
}
}
}
好了就这么多了 很简单吧！
