废话不多说先上效果图 ， 点击边框外的按钮对应显示在边框内， 当点击小叉叉的时候消失 ，
简单的运用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() } } } } 好了就这么多了 很简单吧！
