Empty HTML of droppable/sortable element on draggable stop event

Question

I am using jQuery UI to draggable and sortable to create a drag and drop form builder. When the user stops dragging I want the droppable area to be empty because I am using a function that repopulates the droppable area.

I have tried using jQuery empty() in draggable stop event

let initDrag = () => {
    $( ".draggable" ).draggable({
        connectToSortable: ".droppable",
        helper: "clone",
        revert: "invalid",
        stop: afterDrop
    })
}
let initSortable = () => {
    $( ".droppable" ).sortable({
        revert: true
    });
}

let afterDrop = (event, ui) => {
    let fieldID = $(event.target).attr("data-id")
    $(formTag).html(""); //This is where the problem is
    getFieldData(fieldID).then(fieldData => {
        fieldData[0].field.field_id = Date.now();
        formBuildingJSON.form_fields.push(fieldData[0]);
        appendFieldsMarkup()
    })
    $(ui.helper[0]).remove()
}

I am expecting the 2nd line of afterDrop() to empty the form tag. bu it is giving me an error.

`

jquery-ui.js:16692 Uncaught TypeError: Cannot read property 'removeChild' of null at $.(/form-builder/anonymous function).(anonymous function)._clear (http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:16692:36) at $.(/form-builder/anonymous function).(anonymous function)._clear (http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:144:25) at HTMLLIElement. (jquery-ui.js:15688) at HTMLLIElement.r.complete (jquery.min.js:2) at u (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at u (jquery.min.js:2) at Function.w.fx.tick (jquery.min.js:2) at at (jquery.min.js:2)`

Here is jsfiddle of similar problem

it is making #sortable empty but it is also throwing an error. So want to avoid that error?? — Rohit Mittal

Rohit Mittal Rohit Mittal · Accepted Answer · 2019-02-16T12:52:19

To achieve this, you need to make modification in your jquery-ui.js file. There is a line with below text:

this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] );

Which you need to replace with below code:

if (this.placeholder[ 0 ].length) {
    if (this.placeholder[ 0 ].parentNode.length) {
         this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] );                        
    }
}

Hope this code helps you.

Empty HTML of droppable/sortable element on draggable stop event

1 Answers