如何删除 jquery 添加的元素？答案

【问题标题】：How can I remove an element added by jquery?如何删除 jquery 添加的元素？
【发布时间】：2015-08-13 23:45:26
【问题描述】：

我希望在单击时将列表项移动到 div 中，反之亦然。但似乎只能移动从源加载的元素。

我该怎么做？谢谢。

 <div class="green">
    <ul id="selectable">
        <li class="content-item">Item A</li>
    </ul>
</div>


<div class="red">
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
</div>

<script>

$(".selected-item").click(function() {
    var text =  "<li class='content-item' >"+$(this).text()+"</li>";
    $(".green #selectable").prepend( text );
    $(this).remove();
});

$(".content-item").click(function() {
    var text =  "<span class='selected-item'>"+$(this).text()+"</span>";
    $(".red").append( text );
    $(this).remove();
});
</script>

http://jsfiddle.net/wGz8s/112/

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

你应该使用jQuery's event delegation。

问题是：您的 jsFiddle 使用的是 jQuery 1.4（非常旧的版本），并且没有 .on 事件。

我已经将它更新到 1.11 版，它的工作原理就像一个魅力：

$(".abc").on("click", "span", function(e) {
    var text =  "<li class='content-item' >"+$(e.target).text()+"</li>";
    $(".choices #selectable").prepend( text );
    $(e.target).remove();
});

$(".choices").on("click", "li", function(e) {
    var text =  "<span class='selected-item'>"+$(e.target).text()+"</span>";
    $(".abc").append( text );
    $(e.target).remove();
});

http://jsfiddle.net/wGz8s/113/

【讨论】：

【解决方案2】：

尝试在此处使用event delegation，因为您在运行时添加的元素在事件绑定期间将不可用，

$(document).on("click",".selected-item", function() {
   var text =  "<li class='content-item' >"+$(this).text()+"</li>";
   $(".green #selectable").prepend( text );
   $(this).remove();
});

和

$(document).on("click",".content-item", function() {
  var text =  "<span class='selected-item'>"+$(this).text()+"</span>";
  $(".red").append( text );
  $(this).remove();
});

并且在我的代码中的文档位置使用选择器的静态最近 dom 元素，该元素在 .on() 内部传递

【讨论】：