javascript - 如何删除jquery sortable中的元素？

Question

我的 HTML 代码是这样的:

<div class="content">
    box 1 (Customer)
    <ol class='example mauDIDROP vertical'>
        <li>Valentino Rossi</li>
        <li>David Beckham</li>
        <li>Eden Hazard</li>
        <li>Lionel Messi</li>
        <li>Christiano Ronaldo</li>
        <li>Frank Lampard</li>
    </ol>
</div>

<div class="content">
    <form id="myForm" action="" method="POST">
        box 2 (Room Type)
        <br>
        <select id="room_type">
            <option value="1">Single Room</option>
            <option value="2">Double Room</option>
            <option value="3">Twin Room</option>
        </select>
        <input type="button" value="Add" style="margin-top: -10px;" id="add_room">

        <ol class="example areaDROP vertical" id="room_list">

            <li class="room_number msg1" id="room_remove11">Deluxe Room<div class="room-remove"><a href="javascript:void(0)" onclick="delete_room(11)"><i class="fa fa-times"></i></a></div><ol><li id="room_remove21">John Terry<div class="room-remove"><a href="javascript:void(0)" onclick="delete_room(21)"><i class="fa fa-times"></i></a></div></li></ol></li>
            <li class="room_number msg1" id="room_remove12">Family Room<div class="room-remove"><a href="javascript:void(0)" onclick="delete_room(12)"><i class="fa fa-times"></i></a></div><ol><li id="room_remove22">Jose Mourinho<div class="room-remove"><a href="javascript:void(0)" onclick="delete_room(22)"><i class="fa fa-times"></i></a></div></li></ol></li>
        </ol>

        <button type="submit">Save</button>
    </form>

</div>

我的 Javascript 是这样的:

    function delete_room(id){
        $('#room_remove'+id).remove();
    }

    $(document).ready(function(){  
        $("ol.mauDIDROP").sortable({
            group: '.example'
        });

        $("ol.areaDROP").sortable({
            group:  '.example',
        });

        var room_type_number = 5;
        $('#add_room').click(function(){
            var text = $("#room_type option:selected").html();
            var room_type_id = $.trim($('#room_type').val());       

            $('#room_list').append('<li class="room_number msg" id="room_remove'+(++room_type_number)+'" data-id="'+room_type_id+'" data-name="'+text+'">'+text+'<div class="room-remove"><a href="javascript:void(0)" class="remove'+room_type_id+'" onclick="delete_room('+room_type_number+')"><i class="fa fa-times"></i></a></div><ol></ol></li>');

            $("ol.mauDIDROP").sortable({
                group: '.example'
            });

            $("ol.areaDROP").sortable({
                group:  '.example',    
            });              
        });
    });

演示是这样的:https://jsfiddle.net/oscar11/4wnfnz6z/1/

当我点击关闭图标时，所选元素成功删除。

但我想要的是:当我单击关闭图标时，已删除的选定元素和已删除的客户元素出现在框 1 中。

例如:http://imgur.com/rEzryt3

当我点击关闭图标(豪华房)时，它看起来像这样:http://imgur.com/YpkBTKH

如何保持删除的客户元素向方框 1 移动？

有什么建议可以解决我的问题吗？

谢谢

Answer 1

您可以稍微更改您的 delete_room 函数，以便它从您要删除的房间中获取客户的姓名，然后将它们作为 li 附加到您的左侧容器:

function delete_room(id){
    var customers = '';
    $('#room_remove'+id).find('li').each( function() {
        customers += '<li>'+$(this).text()+'</li>';
    });
    $('#room_remove'+id).remove();
    $('ol.example.mauDIDROP.vertical').append(customers);
}

检查 fiddle :Fiddle