大华前端笔试编程题：动态加载，并删除

这道题目是师妹之前做过，后来自己做，发现还是有问题的：
4000

题目：

思路：1 首先定义一个空字符串用来存储节点数据；

             2   需要将这些数据动态加载在wrap容器里面，刚开始想起了html()方法，因为印象中append()方法是将div添加在尾部的。。。。。，所以，然而html（）方法明显不行啊，哈哈哈，于是又去查了append()方法，append()
方法在被选元素的结尾（仍然在内部）插入指定内容。所以说这里是用append（）来实现动态添加节点 的；

            3  给新增按钮添加增加节点事件，注意，这里是动态添加，所以删除事件必须写在增加事件内部，

Jquery实现：

$(function(){
var html = '';
html+='<div class="content-wrap"><span>content</span><button class="btn-del">删除</button></div>';
var btnAdd = $('#btn_add');
var $wrap = $('#wrap');
btnAdd.click(function(){
if($wrap.find('.content-wrap').length<10) {
$wrap.append(html);
}
$('.btn-del').click(function(){
if($wrap.find('.content-wrap').length>1) {
$(this).parent('.content-wrap').remove();
}
})
})
})

js实现。不过还有问题，这里只能删除一下，求解啊

window.onload = function(){
var html = '';
html+='<div class="content-wrap"><span>content</span><button class="btn-del">删除</button></div>';
var btnAdd = document.getElementById('btn_add');
btnAdd.onclick = function(){
var wrap = document.getElementById('wrap');
var length = wrap.getElementsByClassName('content-wrap').length;
if(length<10){
var contentWrap = document.createElement('div');
console.log(contentWrap);
contentWrap.setAttribute('class','content-wrap');
var spanNode = document.createElement('span');
var spanText = document.createTextNode('content');
spanNode.appendChild(spanText);
var btnDel = document.createElement('button');
var btnDelText = document.createTextNode('删除');
btnDel.appendChild(btnDelText);
btnDel.setAttribute('id','btn-del');
contentWrap.appendChild(spanNode);
contentWrap.appendChild(btnDel);
wrap.appendChild(contentWrap);
}
document.getElementById('btn-del').onclick = function(){
if(wrap.getElementsByClassName('content-wrap').length>1){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
}
}