使动态创建的DIV可以放置

Question

我正在创建一个动态表单，用户可以在其中拖放字段。作为字段的一部分，我有一个剖面面板，也是动态创建的。该部分的想法是对字段进行分组。我的问题是我无法删除部分的元素。这是我到目前为止所拥有的

HTML

 <div class="row" id="droppable"></div

JS

$(function() {
  $(".btn-call-type-div").draggable({
    cancel: false,
    refreshPositions: true,
    revert: true
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      var dragged_element = $(ui.draggable).attr('id');
      var html = "";
      switch (dragged_element) {
        case 'section':

          html = '<div class="panel panel-flat">' +
            '<div class="panel-heading">' +
            '<h6 class="panel-title"><input type="text" placeholder="Section title", class="form-control" name="section[]" required></h6>' +
            '</div>' +
            '<div class="panel-body">' +
            '<p class="panel-section">Drag section fields here</p>' +
            '</div>' +
            '</div>';
          break;
      }
      $("#section-paragraph").append(html);

    }
  });

  $(".panel-body").droppable({
    drop: function(event, ui) {
      var dragged_element = $(ui.draggable).attr('id');
      alert(dragged_element);
      var html = "";
      switch (dragged_element) {
        case 'select':
          //do something here when a select is dropped
          break;
        case 'checkbox':
          //do something here when a checkbox is dropped
          break;
        case 'textarea':
          //do something here when a textarea is dropped
          break;
        case 'text':
          //do something here when a text is dropped
          break;
      }
      $(this).find("p").append(html);
      $(this).css("height", "100%");
    }

  });
});