자바 스크립트 추가/제거

Question

질문이 하나 있습니다. 가능한 삭제 <span> 요소가 javascript append?

추가 된 스팬을 제거하려고하면 아무 일도 일어나지 않습니다. 이처럼

는 :

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#SelectBoxData span').click(function(){ 
     var StatusID = this.id; 
     var StatusIDSplit = StatusID.split("_"); 
     var StatusText = $('#SelectBoxData #' + StatusID).text(); 

     $("#SelectBox").append('<span id=' + StatusID + '>' + StatusText + '</span>'); 
     $("#SelectBoxData #" + StatusID).remove(); 

     InputValue = $("#StatusID").val(); 
     if(InputValue == ""){ 
      $("#StatusID").val(StatusIDSplit[1]); 
     } 
     else{ 
      $("#StatusID").val($("#StatusID").val() + ',' + StatusIDSplit[1]); 
     } 
    }); 

    $('#SelectBox span').click(function(){ 
       var StatusID = this.id; 
     $("#SelectBox #" + StatusID).remove(); 
    }); 
}); 
</script> 

<div id="SelectBoxBG"> 
    <div id="SelectBox"><div class="SelectBoxBtn"></div></div> 
    <div id="SelectBoxData"> 
     <span id="StatusData_1">Admin</span> 
     <span id="StatusData_2">Editor</span> 
     <span id="StatusData_4">Test 1</span> 
     <span id="StatusData_6">Test 2</span> 
    </div> 
    <input type="hidden" id="StatusID" /> 
</div> 

제발 도와주세요.

감사합니다.

Answer 1

예, 삭제할 수 있습니다. 그러나 이벤트 핸들러가 존재하기 전에 click 이벤트 처리기를 추가 할 수 없습니다. 이 코드 :

$('#SelectBox span').click(function(){ 
    var StatusID = this.id; 
    $("#SelectBox #" + StatusID).remove(); 
}); 

은 코드가 실행되는 시간에 #SelectBox의 내부 <span> 요소에 click 이벤트 처리기를 추가합니다은 (그래서, 당신이 제공 HTML, 제로 요소 기준).

$('#SelectBox').on('click', 'span', function() { 
    $(this).remove(); // equivalent to the code you had before 
});