使用按鈕單擊可排序的 JS 刪除項目

Question

我正在嘗試創建一個小的 Sortable JS 項目，我可以在其中將項目從左側克隆到右側，並且可以從右側刪除項目。 我嘗試創建一個按鈕，點擊它會刪除父列表項，但它無法正常工作

我想知道是否有人可以查看我的 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 元素，因此您需要動態地將事件附加到它們。