JQuery刷新列表下拉/可排序容器

如何在JQuery中刷新可拖放/可排序容器？我有一个带有占位符列表项的有序列表，当用户删除列表项时，占位符被替换。如果删除的项目顺序正确，它将显示一条消息，用户可以继续，但如果不正确，他们会收到并警告该项目不正确，此时我希望容器删除列表，重新开始。我尝试了

$（'bin ol'）。删除（'li'）但它不允许我开始将项目放回容器中。有没有一个简单的方法来实现这一点

HTML






在此处添加项目


JQuery

enter code here$(function() {
var limit = 3;
var counter = 0;
var answerKey = ["journey", "obst", "change"];
var answers = [];

$("#bin ol").sortable({cancel: '.placeholder' });
$("#answers li").draggable({
    appendTo: "body",
    helper: "clone",
    cancel: '.placeholder'
});
$("#bin ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        counter++;
        if (counter == limit) {
            $(this).droppable("disable");
        }
        $(this).find(".placeholder").remove();
        ui.draggable.clone().appendTo(this);

        $(this).find("#one").attr("id", "one_1");
        $(this).find("#two").attr("id", "two_1");
        $(this).find("#three").attr("id", "three_1");
    }
});

$("#subBtn").click(function() {
    var answers = [];
$('#bin a').each(function() {
    answers.push($(this).attr('name'));
}); 

if (arraysEqual(answerKey, answers)) {
    $("#bin ol").append('<a href="index.html" name="modal"><img id="correct" src="images/visSelect/seq_correct.png"></a>');
    $("#submitBtn input").attr('disabled', 'disabled');
}else{
    alert('Please Try Again');
    /* $('#bin ol').remove('li'); */
}

});

在此处输入代码$（函数（）{
var限值=3；
var计数器=0；
var answerKey=[“旅程”、“观察”、“改变”]；
var回答=[]；
$（“#bin ol”）.sortable（{cancel:'.placeholder'}）；
$（“#回答李”）。可拖动({
附：“身体”，
助手：“克隆”，
取消：'.placeholder'
});
$（“#bin ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
计数器++；
如果（计数器==限制）{
$（此）.dropable（“禁用”）；
}
$（this.find（“.placeholder”）.remove（）；
ui.draggable.clone（）.appendTo（this）；
$（this.find（“#one”）.attr（“id”，“one#u 1”）；
$（this.find（“#two”）.attr（“id”，“two#u 1”）；
$（this.find（“#three”）.attr（“id”，“three#1”）；
}
});
$（“#subBtn”）。单击（函数（）{
var回答=[]；
$（'#bin a'）。每个（函数（）{
push（$（this.attr（'name'））；
}); 
如果（排列相等（回答键，回答））{
$（“#bin ol”）。追加（“”）；
$（“#submitBtn input”）.attr（'disabled'，'disabled'）；
}否则{
警报（“请重试”）；
/*$（'bin ol'）。删除（'li'）*/
}
});
我建议：

if (arraysEqual(answerKey, answers)) {
    $("#bin ol").append('<a href="index.html" name="modal"><img id="correct" src="images/visSelect/seq_correct.png"></a>');
    $("#submitBtn input").attr('disabled', 'disabled');
}else{
    alert('Please Try Again');
    $('#bin ol').html(create_droppable());
}

function make_droppable(){
    return '<li id="uno" draggable="false" class="placeholder">Add Items Here</li>';
}

if（arraysEqual（answerKey，answers））{
$（“#bin ol”）。追加（“”）；
$（“#submitBtn input”）.attr（'disabled'，'disabled'）；
}否则{
警报（“请重试”）；
$（'#bin ol'）.html（创建可拖放（））；
}
函数make_dropable（）{
返回“
在此处添加项目；
}

然后，如果可能，添加
onload=“$（'#bin ol'）.html（create_droppable（））；”
到您的身体标签。
您可以分享您尝试过的代码吗？另外，您说您有一个无序列表，但您使用的是
ol
，不是
ul
？很抱歉，输入错误并已修复。我已经添加了您的建议，但我仍然不确定如何清空#bin，我可以添加吗？现在清空还是有更好的方法呃，怎么说？实际上我自己对jQuery还是很陌生。在阅读了.empty（）之后，我想，
$（'#bin'）.empty（）
就可以做到这一点。我还注意到我在回答中的另一个拼写错误，我会马上纠正。啊，早上。谢谢你，这就是我最后要做的。
if (arraysEqual(answerKey, answers)) {
    $("#bin ol").append('<a href="index.html" name="modal"><img id="correct" src="images/visSelect/seq_correct.png"></a>');
    $("#submitBtn input").attr('disabled', 'disabled');
}else{
    alert('Please Try Again');
    $('#bin ol').html(create_droppable());
}

function make_droppable(){
    return '<li id="uno" draggable="false" class="placeholder">Add Items Here</li>';
}