如何删除可排序的jQuery元素？

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

检查小提琴： 小提琴

Answer 2

这种方法具有更好的性能，这是因为将查找设置为var并执行了循环，而不是对查找进行doind循环。

var child = $('#room_remove'+id).find('li');
if(child.length > 0){
    var li = "";
        child.each(function(){
            li += "<li>"+$(this).text()+"</li>";
        });
}

$(".mauDIDROP").append($(li));