废话不多说先上效果图 ， 点击边框外的按钮对应显示在边框内， 当点击小叉叉的时候消失 ，
简单的运用js的创建节点 以及删除节点
先写一下css代码：
.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代码：
<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()}}}}好了就这么多了 很简单吧！
