添加和删除jquery上的元素

Question

我试图创建一个UI，您可以在容器内添加一组元素而不需要重复，并且可以删除它自己。这是我的代码

<script type="text/javascript"> 

var element = document.getElementById(); 

$(document).ready(function(){ 

    $("a").click(function(e){ 
     var node = (e.target).cloneNode(true); 
     $('.smallInnerBox').append(node); 
    }); 

    $("button").click(function(e){ 
     $(".m").detach(); 
    }); 

}); 

</script> 

<h1>jQuery clone() example</h1> 

<a href="#"><div class="m">div 1<button>remove</button></div></a> 
<a href="#"><div class="m">div 2</div></a> 
<a href="#"><div class="m">div 3</div></a> 

<div class="smallBox"> 
    I'm a small box 
</div> 

<div class="smallInnerBox"></div> 

Answer 1

您的单击事件句柄需要防止单击锚点时重新加载页面。

$("a").click(function(e) 
{ 
    var node = (e.target).cloneNode(true); 
    $('.smallInnerBox').append(node); 
    e.preventDefault(); 
}); 

Answer 2

这工作与jQuery 1.9.1 - 见：jsFiddle

//var element = document.getElementById(); // remove this line 

$(document).ready(function(){ 

    $("a").click(function(e){ 
     $(e.target).clone(true, true).appendTo('.smallInnerBox'); 
    }); 

    $("button").on('click', function(e){ 
     $(".m").detach(); 
    }); 

}); 

但它消除了太多的元素;）