使动态创建的DOM元素可以删除

Question

$(document).ready(function() {
      oa1=$('#a1').find( "p" ).text();
        oa2=$('#a2').find( "p" ).text();
        oa3=$('#a3').find( "p" ).text();
        oa4=$('#a4').find( "p" ).text();
        sounds=[oa1,oa2,oa3,oa4];
    $( ".draggable" ).draggable({helper : 'clone' });
      $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        window.alert("You cannot insert an element in an array because it has a fixed size.To insert any element, you should have a bigger array.");
       
      }
      });
      $(".droppable_list").droppable({
          drop:function(event,ui){
              var drop_id=$(event.target).attr('id');
              console.log("This is the dropped id "+drop_id);
              var num=Number(drop_id.substring(1));
              //console.log(num);
              $("#a"+num+".droppable_list").find("p").html(ui.draggable.attr("id").substring(1));
              for(i=num;i<sounds.length;i++)
              {
                
                  $("#a"+(i+1)+".droppable_list").find("p").html(sounds[i-1]);
                 
              }
              
              var arr_div=document.createElement("div");
              arr_div.setAttribute("class","arrows");
              var arr=document.createElement("img");
              arr.setAttribute("src","{{=URL('static','images/arrow.png')}}");
              arr_div.appendChild(arr);

              var block=document.createElement("div");
              
              var id="a"+(sounds.length+1);
              block.setAttribute('id',id);
              block.setAttribute('class','droppable_list');
              
              var par=document.createElement("p");
              var text=document.createTextNode(sounds[sounds.length-1]);
              sounds.splice(num-1,0,ui.draggable.attr("id").substring(1));
              
              par.appendChild(text);
              block.appendChild(par);
              
              var box=document.getElementById("box_list");
              box.appendChild(arr_div);
              box.appendChild(block);
              
              

          }
          });
  } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" type="text/css">

<div id="box_list">
    <center>
    <div id="a1" class="droppable_list">
     <p>do</p>
        </div>
      <div class="arrows"><img src="{{=URL('static','images/arrow.png')}}">
        </div></center></div>

我正在动态创建DOM元素，我将它们的类设置为“droppable_list”，其中启用了droppable。但是，动态创建的元素不可删除。我尝试通过在线发布的类似问题来理解它。但我不理解它。请告诉我我错在哪里以及为什么这是错的。任何帮助表示赞赏。在此先感谢我已附上我的代码：