title: jQuery Droppable - Not able to remove Cloned Element
body: <p>I am using jQuery UI Droppable...</p>
  
  <p>I need a same functionality like Drag and Drop for clicking on star icon from Draggable, it has to add to the Droppable container. Which I tried successfully.</p>
  
  <p>But, When I am trying to remove <code>&lt;li&gt;</code> element from the Droppable container, the same trick (clone) is not working... here.. on Clicking on Close icon it should only close relevant <code>&lt;li&gt;</code> from the draggable area.</p>
  
  <p>Any quick suggestions please?</p>
  
  <p><strong>Is it possible to:</strong></p>
  
  <ul>
  <li>Clone (clicking on Star icon) restrict to only once... while it is creating multiple <code>&lt;li&gt;</code> s for multiple clicks.</li>
  </ul>
  
  <hr>
  
  <h2><a href="http://jsfiddle.net/ReddyPrasad/o12c3s74/1/" rel="nofollow noreferrer">FIDDLE</a></h2>
  
  <hr>
  
  <blockquote>
    <p><strong>Screenshots for Reference</strong></p>
  </blockquote>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/zDcy7.jpg" alt="For Reference"></p>
  
  <blockquote>
    <p><strong>HTML</strong></p>
  </blockquote>
  
  <pre><code>&lt;div class="mn-items"&gt;
    &lt;h2&gt;Drag&lt;/h2&gt;
    &lt;div id="catalog"&gt;
        &lt;ul class="rp-draggable"&gt;
          &lt;li class="one"&gt;Item 1 &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="two"&gt;Item 2 &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="three"&gt;Item 3 &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="four"&gt;Item 4 &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="five"&gt;Item 5 &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="six"&gt;Item 6 &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="header-favorites"&gt;
    &lt;h2&gt;Drop Here...&lt;/h2&gt;
      &lt;ul class="h-droped-list"&gt;
        &lt;li class="placeholder"&gt;Add your items here&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>jQuery</strong></p>
  </blockquote>
  
  <pre><code>$(document).ready(function(){
  
      /* jQuery Droppable */
      $(function() {
          $( ".mn-items .rp-draggable li" ).draggable({
              appendTo: "body",
              helper: "clone"
          });
          $( ".header-favorites ul" ).droppable({
              activeClass: "ui-state-default",
              hoverClass: "ui-state-hover",
              accept: ":not(.ui-sortable-helper)",
              drop: function( event, ui ) {
                  $( this ).find( ".placeholder" ).remove();
                  $(ui.draggable).clone().appendTo(this);
              }
          }).sortable({
              items: "li:not(.placeholder)",
              sort: function() {
                  $( this ).removeClass( "ui-state-default" );
              }
          });
      });
  
  
      /* Click Star Icon to Add to Drop Here Container */
      $('ul.rp-draggable li .fa-star-o').click(function(){
          $(this).closest('li').clone().appendTo('.h-droped-list');
          $(this).closest('li').toggleClass('addedToFav');
      });
  
      /* Click Close Icon to Remove from Drop Here Container */
      $("ul.h-droped-list li .fa-star-o").click(function(){
          $(this).closest('li').remove();
      });
  
  });
  </code></pre>