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

Question

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

I was wondering if someone could look at my codepen（代码也在下面）看看我做错了什么？删除按钮有时只能工作？？？ [如果删除了右边的项目，再往里拖就不能再删除了！]

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

请指教，谢谢！！

$("#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 元素，因此您需要为它们动态附加事件。

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

Sortable JS delete item using button click

javascript

sortablejs

I was wondering if someone could look at my codepen（代码也在下面）看看我做错了什么？删除按钮有时只能工作？？？ [如果删除了右边的项目，再往里拖就不能再删除了！]

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