0

次のコードが機能します: -空の div の下のテキストをクリックします -空の div 内に新しい span タグを作成します -選択したテキストをそのスパンに配置します

機能しないもの: '.shtuff'div 内のスパン タグは、クリックしても削除できません。そしてそれを空の「.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(); });

私はそれを正しく得ることができないところです

4

1 に答える 1

3

remove()の代わりに使用しempty()ます。 要素 istself を削除しますが、空の場合はs の内容remove()のみを空にします。span

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

フィドル

于 2013-05-24T21:02:11.093 に答える