如何删除拖放的元素(How do I delete an element dragged and dropped)

如何删除拖放的元素(How do I delete an element dragged and dropped)

我试图删除一个元素，当它被拖入一个Bin（id =“list4”），但不是当被拖入另一个列表。 丢弃时，我也更新数据库。 这是我用来删除放入list4的元素的代码。

for(var i = 0; i < $('#list4').length; i++){ $( '#list4' )[i].remove(); }

它会删除持有<li>元素的<ul>而不仅仅是<li>元素。 我究竟做错了什么？

编辑 - 添加完整的脚本

$(document).ready(function(){ $("#list0, #list1, #list2, #list3, #list4").sortable({ connectWith: ".connectList", update: function( event, ui ) { var list0 = $( "#list0" ).sortable( "toArray" ); var list1 = $( "#list1" ).sortable( "toArray" ); var list2 = $( "#list2" ).sortable( "toArray" ); var list3 = $( "#list3" ).sortable( "toArray" ); var list4 = $( "#list4" ).sortable( "toArray" ); campaignBoardAJAX(window.JSON.stringify(list0), window.JSON.stringify(list1), window.JSON.stringify(list2), window.JSON.stringify(list3), window.JSON.stringify(list4)); for(var i = 0; i < $('#list4').length; i++){ $( '#list4' )[i].remove(); } } }).disableSelection(); });

I'm trying to delete an element when it is dragged into a Bin (id="list4") but not when dragged into another list. When dropped I update the database as well. This is the code I'm using to delete elements dropped into list4.

for(var i = 0; i < $('#list4').length; i++){ $( '#list4' )[i].remove(); }

It deletes the <ul> holding the <li> elements rather than just the <li> elements. What am I doing wrong?

EDIT - Added full script

$(document).ready(function(){ $("#list0, #list1, #list2, #list3, #list4").sortable({ connectWith: ".connectList", update: function( event, ui ) { var list0 = $( "#list0" ).sortable( "toArray" ); var list1 = $( "#list1" ).sortable( "toArray" ); var list2 = $( "#list2" ).sortable( "toArray" ); var list3 = $( "#list3" ).sortable( "toArray" ); var list4 = $( "#list4" ).sortable( "toArray" ); campaignBoardAJAX(window.JSON.stringify(list0), window.JSON.stringify(list1), window.JSON.stringify(list2), window.JSON.stringify(list3), window.JSON.stringify(list4)); for(var i = 0; i < $('#list4').length; i++){ $( '#list4' )[i].remove(); } } }).disableSelection(); });

最满意答案

我的解决方案

$(document).ready(function(){ $("#list0, #list1, #list2, #list3, #list4").sortable({ connectWith: ".connectList", update: function( event, ui ) { var list0 = $( "#list0" ).sortable( "toArray" ); var list1 = $( "#list1" ).sortable( "toArray" ); var list2 = $( "#list2" ).sortable( "toArray" ); var list3 = $( "#list3" ).sortable( "toArray" ); var list4 = $( "#list4" ).sortable( "toArray" ); campaignBoardAJAX(window.JSON.stringify(list0), window.JSON.stringify(list1), window.JSON.stringify(list2), window.JSON.stringify(list3), window.JSON.stringify(list4)); $("#list4").empty() ; } }).disableSelection(); });

My solution:

$(document).ready(function(){ $("#list0, #list1, #list2, #list3, #list4").sortable({ connectWith: ".connectList", update: function( event, ui ) { var list0 = $( "#list0" ).sortable( "toArray" ); var list1 = $( "#list1" ).sortable( "toArray" ); var list2 = $( "#list2" ).sortable( "toArray" ); var list3 = $( "#list3" ).sortable( "toArray" ); var list4 = $( "#list4" ).sortable( "toArray" ); campaignBoardAJAX(window.JSON.stringify(list0), window.JSON.stringify(list1), window.JSON.stringify(list2), window.JSON.stringify(list3), window.JSON.stringify(list4)); $("#list4").empty() ; } }).disableSelection(); });