Question

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 $('#bin ol').remove('li'); but it would not allow me to start dropping items back into the container. Is there a simple way to accomplish this?

HTML

<article id="answers">

        <ul>
            <li><a draggable="true" href="#" id="one" name="change" class="imgHvr"></a></li>
            <li class="spaced"><a draggable="true" href="#" id="two" name="obst" class="imgHvr"></a></li>
            <li><a draggable="true" href="#" id="three" name="journey" class="imgHvr"></a></li>
        </ul>

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

        </article>

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'); */
}

});

Answer 1

I’d suggest this:

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

And then if possible, add onload="$('#bin ol').html(create_droppable());" to your body tag.