如何刪除jQuery添加的元素？

Question

我希望單擊時將列表項移動到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/

Answer 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/

Answer 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()