昨天碰到的一道笔试题：向文档html指定元素中动态增加dom节点数据，新增节点自带删除按钮（删除对应节点）。要求：增加的节点数据不能超过10条，至少保留1条节点数据。
HTML：
<div id="container"> <button id="btn_add" class="btn-add">新增</button> <div id="wrap"></div> </div>
script：
思路：将添加的节点方法封装在addDiv()函数里，这样只需重复调用就能动态添加相同的节点。将删除节点函数delDiv()绑定在对应的节点上，这样就能实现删除指定节点了。
window.onload = function(){ var wrap = document.getElementById('wrap'); //增加节点 var addbtn = document.getElementById('btn_add'); addbtn.onclick = function(){ if(wrap.childNodes.length < 10){ addDiv(); }else{ alert('节点数量超过限制，无法添加！'); } } function addDiv(){ var ele = document.createElement('div'); ele.className = 'content-wrap'; var firChildNode = document.createElement('span'); firChildNode.innerHTML = 'content'; var secChildNode = document.createElement('button'); secChildNode.className = 'btn-del'; secChildNode.innerHTML = '删除'; ele.appendChild(firChildNode); ele.appendChild(secChildNode); wrap.appendChild(ele); //按钮添加删除功能 secChildNode.onclick = delDiv; } function delDiv(){ if(wrap.childNodes.length > 1){ wrap.removeChild(this.parentNode); }else{ alert('最后一个节点无法删除！'); } } }
完成代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>增加和删除节点</title> </head> <body> <div id="container"> <button id="btn_add" class="btn-add">新增</button> <div id="wrap"></div> </div> <script> window.onload = function(){ var wrap = document.getElementById('wrap'); //增加节点 var addbtn = document.getElementById('btn_add'); addbtn.onclick = function(){ if(wrap.childNodes.length < 10){ addDiv(); }else{ alert('节点数量超过限制，无法添加！'); } } function addDiv(){ var ele = document.createElement('div'); ele.className = 'content-wrap'; var firChildNode = document.createElement('span'); firChildNode.innerHTML = 'content'; var secChildNode = document.createElement('button'); secChildNode.className = 'btn-del'; secChildNode.innerHTML = '删除'; ele.appendChild(firChildNode); ele.appendChild(secChildNode); wrap.appendChild(ele); //按钮添加删除功能 secChildNode.onclick = delDiv; } function delDiv(){ if(wrap.childNodes.length > 1){ wrap.removeChild(this.parentNode); }else{ alert('最后一个节点无法删除！'); } } } // addbtn.onclick = function(){ // if(wrap.childNodes.length < 10){ // var newele = ele.cloneNode(true);//深复制 // wrap.appendChild(newele); // }else{ // alert('节点数量超过限制，无法添加！'); // } // } </script> </body> </html>