jquery - 从 div 中删除 span 标签 - 在它被动态放置之后

Question

以下代码有效： -单击空 div 下方的文本 -在空 div 内创建新的跨度标记 -将选定文本放入该跨度

什么不起作用：单击 '.shtuff'div 中的 span 标签时无法删除它们。并将其放入空的 '.shtuff' 类 div

    $(document).ready(function(){

    $('.shtuff li').click(function(){

    //both below work
     $('.display').append($("<span></span>").text($(this).text())); 
    //$('.display').append("<span>" + $(this).text() + "</span>");  

        });

        //for single use
    //$('.shtuff li').click(function(){$(this).empty();}


 $('.display').on('click', 'span', function(){$(this).empty(); });

      });//ready
     </script>

CSS：

<style>
.display span{background-color:#ccc;margin-left:3px;}
.display{border:1px solid; width:300px;hieght:100px}
ul li {list-style-type:none;}

</style>

html:

<div class="display">some text</div>
<ul class="shtuff">
<li>blueberry </li>
<li>cherry </li>
<li>strawberry  </li>
<li>ferret droppings </li>
</ul>

$('.display').on('click', 'span', function(){$(this).empty(); });

是我无法做到的地方

Answer 1

使用remove()而不是empty(). remove()将删除元素本身，其中为空将仅清空spans 内容。

$('.display').on('click', 'span', function () {
      $(this).remove();
 });

小提琴