동적으로 추가 된 DIV를 삭제할 수 있습니까?

Question

내 드래그 앤 드롭 작업에 대해 동적으로 추가 된 div를 만드는 데 문제가 있습니다. 누군가가이 바이올린을 검사 할 수 있다면 http://jsfiddle.net/dgobrien123/FvG2J/embedded/result/ 그리고 아마도 내 오류를 찾는 데 도움이 될 것입니다.

다음

 $(".droppable").droppable({ 
      activeClass: 'dragactive', 
      hoverClass: 'drophover', 
      drop: function(event, ui) {      
       alert(this.id); 
       $(this).addClass('drophighlight').find('p').text('' + ui.draggable.children("span").text() + ''); 
      } 
     }); 

컨테이너가 추가 방법은 다음과 같습니다 :

function addGroup() { 
     counter = counter + 1; 
     $("div#pcgroups").append("<div class='dropcontainer'><div class='droppable' id='GROUP" + counter + "'><p>PC GROUP #" + counter + "</p></div></div>"); 
     return counter; 
    } 

Answer 1

당신이 겪고있는 문제는 적용되어있는 문서 준비 방법에

이는 드롭 가능한이 적용되는 방법입니다 요소가 생성되기 전에 삭제할 수 있습니다. 그들은 당신의 addGroup() 메소드에서 생성 된대로 적용 할 수 있습니다 :

function addGroup() { 
    counter = counter + 1; 
    var x = $("<div class='dropcontainer'><div class='droppable' id='GROUP" + counter + "'><p>PC GROUP #" + counter + "</p></div></div>"); 

    $("div#pcgroups").append(x); 
    x.droppable({ 
     activeClass: 'dragactive', 
     hoverClass: 'drophover', 
     drop: function(event, ui) { 
      alert(this.id); 
      $(this).addClass('drophighlight').find('p').text('' + ui.draggable.children("span").text() + ''); 
     } 
    }); 
} 

업데이트 바이올린을 :

http://jsfiddle.net/johnkoer/FvG2J/28/