添加和刪除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(); 
    }); 

}); 

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