JQuery refresh list drop/sortable container
<p>How do I refresh a droppable/sortable container in JQuery? I have an ordered list with a placeholder list item, that when the user drops a list item, the placeholder is replaced. If the items dropped are in the correct order it will display a message and the user can move on, but if incorrect they receive and alert that it is incorrect, and it is at this point I would like the container to remove the list to start over. I tried <code>$('#bin ol').remove('li');</code> but it would not allow me to start dropping items back into the container. Is there a simple way to accomplish this?</p>

<p>HTML</p>

<pre><code>&lt;article id="answers"&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;a draggable="true" href="#" id="one" name="change" class="imgHvr"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="spaced"&gt;&lt;a draggable="true" href="#" id="two" name="obst" class="imgHvr"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a draggable="true" href="#" id="three" name="journey" class="imgHvr"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;div id="bin"&gt;
            &lt;div class="ui-widget-content"&gt;
            &lt;hr id="topBorder"&gt;&lt;/hr&gt;
            &lt;h2&gt;&lt;/h2&gt;
                &lt;ol&gt;
                    &lt;li id="uno" draggable="false" class="placeholder"&gt;Add Items Here&lt;/li&gt;
                &lt;/ol&gt;
            &lt;hr id="bottomBorder"&gt;&lt;/hr&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;/article&gt;
</code></pre>

<p>JQuery</p>

<pre><code>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('&lt;a href="index.html" name="modal"&gt;&lt;img id="correct" src="images/visSelect/seq_correct.png"&gt;&lt;/a&gt;');
    $("#submitBtn input").attr('disabled', 'disabled');
}else{
    alert('Please Try Again');
    /* $('#bin ol').remove('li'); */
}

});
</code></pre>
