使用按钮单击可排序的JS删除项目

Question

我正在尝试创建一个可排序的JS小项目，我可以在其中将项目从左侧克隆到右侧，并可以从右侧删除项目。我尝试创建一个按钮，单击该按钮会删除父列表项，但无法正常工作

I was wondering if someone could look at my codepen（也在下面的代码中）查看我在做什么错误？删除按钮有时只能工作？？？ [如果删除右侧的项目，则一旦将其拖入，将无法再删除！]

理想情况下，我希望左侧没有NO删除按钮，并且只有在将其拖动到右侧后才能够删除，但是我不确定如何实现此功能。

请告知，谢谢！！

$("#sortable1").sortable({
  connectWith: ".builder-stage",
  helper: function(event, el) {
    copyHelper = el.clone().insertAfter(el);
    return el.clone();
  },
  stop: function() {
    copyHelper && copyHelper.remove();
  }
});
$(".builder-stage").sortable({
  receive: function(event, ui) {
    copyHelper = null;
  }
});

$(".delete").click(function() { 
    $(this).parent().remove();
});

.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;
    > 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;
    > 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pagebuilder clearfix">
  
  <div class="widgets-panel">
    <ul id="sortable1" class="connectedSortable rows-widget-list">
      
      <li class="ib-row row-widget-list-item">
        <select>
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>
          <option value="d">D</option>
        </select>
        <button class="delete">Delete</button>
      </li>
      
      <li class="ib-row row-widget-list-item">
                <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
        <button class="delete">Delete</button>
      </li>
      
    </ul>
  </div>
  
  <div class="stage">
      <ul id="sortable2" class="builder-stage connectedSortable">
        <li class="ui-state-default">An item
          <button class="delete">Delete</button>
    </li>
      </ul>
  </div>
  

</div>

Answer 1

代替：

$(".delete").click(function() { 
    $(this).parent().remove();
});

输入：

$("#sortable2").on('click', '.delete', function() {   
    $(this).parent().remove();
});

由于要动态删除html元素，因此需要将事件动态附加到它们。