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

});

但它删除了太多元素;）

在jquery上添加和删除元素

2 个答案: