js创建节点删除节点实例

.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;
		}

    <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()
				
			}
			
		}
			}
		}
	
好了就这么多了 很简单吧！