JSFiddle - React, Tailwind, and code Playground

HTML

<div id="droparea">
    <div id="child1" class="lechild">numero uno</div>
    <div id="child2" class="lechild">y numero dos</div>
</div>

<input id="removebutton" type="button" value="remove child elements">

CSS

#droparea {
    width:300px;
    height:130px;
    padding:10px;
    background-color:#000;
}
#child1 {
    font-size:1.5em;
    padding:10px;
    background-color:#E01B6A;
}#child2 {
    font-size:1.1em;
    padding:10px;
    background-color:#fff;
}

JavaScript

var droptarget = "#droparea";
    $(droptarget).live('dragenter', dragenter);
    $(droptarget).live('dragleave', dragleave);
    $(droptarget).live('dragover', nothing);
    $(droptarget).live('drop', drop);

function nothing(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    return false;
}
function dragenter(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    console.log("Drag entered - dragenter() called");
    return false;
}
function dragleave(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    console.log("Drag exited - dragleave() called");
    return false;
}
function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    return false;
}

$(document).ready(function() {
    $('#removebutton').click(function() {
        $('.lechild').remove();
    });
});