javascript - 将功能应用于当前点击并删除其他点击的功能

Question

尝试将函数 addDiv() 应用于当前单击的元素并且它工作正常，但它不会在另一次单击时删除函数 addDiv()。单击文本时，addDiv() 函数将应用于 div 标签并添加示例文本，但只需在当前单击的标签上应用此 addDiv() 函数。有人能帮我吗？

这是链接:https://jsfiddle.net/a0L2jj1y/1/

HTML

<div>
    Tesing 1
</div>
<div>
    Tesing 2
</div>
<div>
    Tesing 3
</div>

JS

$(function(){

    function addDiv(){

    $('<div class="txt"/>').text('sample text added').appendTo('.clicked');

    }

    $(document).on('click', function(event){
        var clickedTag = event.target
        event.stopPropagation();
        $('.clicked').removeClass('clicked');

        if($(clickedTag).text().length >= 1){
            $(clickedTag).addClass('clicked');
            addDiv();
        } else {
            // I need to remove addDiv();
        }
    });
});

Answer 1

尝试:

$(function(){

  function addDiv(){

  $('<div class="txt"/>').text('sample text added').appendTo('.clicked');

  }
  $(document).on('click', function(event){
  var clickedTag = event.target
  event.stopPropagation();
  $('.clicked').removeClass('clicked');

  if($(clickedTag).text().length >= 1){
  $(clickedTag).addClass('clicked');
  addDiv();

  } else {
  $(clickedTag).unbind();
  }

  });


});