요소를 제거하십시오 자바 스크립트 jquery

Question

나는 행을 삭제하려고합니다. 그러나 나는 그것을 정말로 이해할 수 없다. 우선, 새 행을 추가하는 버튼이 있습니다. 하지만 방금 추가 한 행을 제거 할 수있는 권한을 사용자에게 부여하려고합니다. 행에는 삭제 버튼 역할을하는 'div'가 있습니다. 하지만 삭제 버튼이 작동하지 않습니까?

나는 뭔가를 놓치고 있습니까?

인사,

JUKI

function addrow() { 
$("#container").append("<div id=\"row_added\"><div class=\"deletebutton\" id=\"delbuttonnumber\"></div><div id=\"addedcolor\" class=\"colorcube\"></div></div>"); 
} 

// deleterow the row 
$(".deletebutton").click(function() { 
    rowclrid = "#" + $(this).parent().attr("id"); 
    $(rowclrid).remove(); 
}); 

Answer 1

당신이해야 할 일은 live 방법을 사용하는 것입니다. 이렇게하면 click 핸들러를 설정할 때 존재하는 항목뿐만 아니라 DOM에 추가 된 모든 새 항목에 대한 이벤트가 추가됩니다.

// deleterow the row 
$(".deletebutton").live('click', function() { 
    $(this).parent().remove(); 
}); 

ID를 가져 와서 행을 가져올 필요가 없습니다. 위의 방법에서 더 간단합니다.

Answer 2

내 추측으로는 핸들러가이 특정 요소에 부착되지 않도록 당신이 새로운 내용을 추가하기 전에 클릭 핸들러를 할당 한 것입니다. 당신은 그들이 이미 존재 여부, 특정 부모 요소 아래의 모든 요소에 대한 이벤트를 수신 .delegate()를 사용할 수 있습니다

이라는 DOM의 기능을 사용하여 요소 #container 내에서 발생하는 모든 클릭 이벤트를 수신

$('#container').delegate('.deletebutton', 'click', function(){ 
    $(this).parent().remove(); 
}); 

event bubbling을 입력 한 다음 .deletebutton 요소에서 발생했는지 확인한 다음 처리기를 호출합니다.

핸들러 내부의 간단한 코드에 유의하십시오.