jquery - 在 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();
    });

});

但它删除了太多元素；）