title: Sortable JS delete item using button click
body: <p>I'm trying to create a little Sortable JS project where I can clone items from the left side into the right, and can delete items from the right side. I tried creating a button where on click it deletes the parent list item but it's not working properly</p>
  <h1><a href="https://codepen.io/mayagans/pen/MWYvVQx" rel="nofollow noreferrer">I was wondering if someone could look at my codepen</a> (code also below) and see what I'm doing incorrectly? The delete buttons only work sometimes??? [If you delete an item on the right side, once you drag any more in they can no longer be deleted!]</h1>
  <p><a href="https://i.stack.imgur.com/yWzx9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yWzx9.png" alt="enter image description here" /></a></p>
  <h1>Ideally I'd like to have NO delete button on the left side and only have the ability to delete once its been dragged on the right side but I'm not sure how to implement this.</h1>
  <p>Please advise, thank you!!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#sortable1").sortable({
    connectWith: ".builder-stage",
    helper: function(event, el) {
      copyHelper = el.clone().insertAfter(el);
      return el.clone();
    },
    stop: function() {
      copyHelper &amp;&amp; copyHelper.remove();
    }
  });
  $(".builder-stage").sortable({
    receive: function(event, ui) {
      copyHelper = null;
    }
  });
  
  $(".delete").click(function() { 
      $(this).parent().remove();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.widgets-panel {
    float: left;
    height: 500px;
    width: 300px;
    border-right: 1px solid #000;
    padding: 15px;
    .rows-widget-list {
      list-style: none;
      padding: 0;
      margin: 0;
      &gt; li {
        display: block;
        padding: 10px 15px;
        border: 1px solid #ddd;
        margin-bottom: 5px;
        background-color: #fff;
      }
    }
    .ui-sortable-placeholder {
    position: absolute;
    }
  }
  .stage {
    padding: 15px;
    float: left;
    width: calc(100% - 300px);
    .connectedSortable {
      list-style: none;
      padding: 0;
      margin: 0;
      &gt; li {
        display: block;
        padding: 10px 15px;
        border: 1px solid #ddd;
        margin-bottom: 5px;
      }
    }
  }
  .delete {
    background: none;
    border: 0px;
    color: #888;
    font-size: 15px;
    width: 60px;
    margin: 0px 0 0;
    font-family: Lato, sans-serif;
    cursor: pointer;
    float: right;
  }
  button:hover {
    color: #CF2323;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="pagebuilder clearfix"&gt;
    
    &lt;div class="widgets-panel"&gt;
      &lt;ul id="sortable1" class="connectedSortable rows-widget-list"&gt;
        
        &lt;li class="ib-row row-widget-list-item"&gt;
          &lt;select&gt;
            &lt;option value="a"&gt;A&lt;/option&gt;
            &lt;option value="b"&gt;B&lt;/option&gt;
            &lt;option value="c"&gt;C&lt;/option&gt;
            &lt;option value="d"&gt;D&lt;/option&gt;
          &lt;/select&gt;
          &lt;button class="delete"&gt;Delete&lt;/button&gt;
        &lt;/li&gt;
        
        &lt;li class="ib-row row-widget-list-item"&gt;
                  &lt;select&gt;
            &lt;option value="1"&gt;1&lt;/option&gt;
            &lt;option value="2"&gt;2&lt;/option&gt;
            &lt;option value="3"&gt;3&lt;/option&gt;
            &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;/select&gt;
          &lt;button class="delete"&gt;Delete&lt;/button&gt;
        &lt;/li&gt;
        
      &lt;/ul&gt;
    &lt;/div&gt;
    
    &lt;div class="stage"&gt;
        &lt;ul id="sortable2" class="builder-stage connectedSortable"&gt;
          &lt;li class="ui-state-default"&gt;An item
            &lt;button class="delete"&gt;Delete&lt;/button&gt;
      &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>