Jquery - 체인화와 함께 작동하지만 떨어져 있지 않음

Question

저는 Jquery를 처음 사용하는 숙련 된 개발자입니다. 함께 연결될 때 작동하는 코드가 있지만 별도의 경우가 아니고 Jquery 동작을 이해하고 싶을 때 문제가 발생합니다.

나는 4 개의 버튼이있는 <div>입니다. 4 개의 버튼 중 하나가 눌려지면 4 개의 버튼이 모두 사라져야하고 새로운 버튼이 필요합니다 (새 버튼은 다른 CSS와 다른 값을 가진 버튼입니다)

버튼을 누를 때

나는 내가 다시 삽입을 시도 그때 그때

var splitstr = event.target.id.split('-'); 
var pick = splitstr[0]; 
var position_id = splitstr[1]; 
var singlebutton = '<button class="pick' + pick + ' pickbutton-box btn btn-primary btn-large madepick" name="pick" ' + 'id="made'+ position_id + '" ' + 'value="' + pick + '">' + pick + '</button>'; 

를 삽입 할 새 버튼을 구축하고이

$(this).parent().empty(); 

처럼 <div> 지우 상위 :

이렇게하면 <div>에있는 4 개의 버튼이 모두 제거되지만 새 버튼이 추가되지 않습니다. 그러나 빈을 추가하기 전에 문자열을 작성하면 추가됩니다.

var singlebutton = " ---- HTML CODE for button ---- " 
$(this).parent().empty().append(singlebutton); 

모든 것이 예상대로 작동합니다. 이것은 나에게 어떤 의미가없는 것처럼 보입니다. 누군가 일어날 일을 설명해 주시겠습니까? 에 의해 제거되는 클릭 된 버튼,에, this 점을

는 핸들러 코드가 실행

$('div button').click(function() { 
    $(this).parent().empty(); 
    // etc 
}); 

이 같은

<div> 
    <button>click me</button> 
    <button>click me</button> 
    <button>click me</button> 
    <button>click me</button> 
</div> 

그리고 이벤트 핸들러 :

Answer 1

당신은 당신이 뭔가를 가지고 상태 $(this).parent().empty();. this이 비어 있기 때문에 부모 div에 대한 참조를 나중에 참조 할 수 있도록 저장해야합니다. 이런 식으로 뭔가가 : 부모 요소에 대한 참조 .parent부터 앞서 전달되는, 그리고 this의 값이 관련이되기 때문에

$('div button').click(function() { 
    var div = $(this).parent().empty(); 
    // cannot use 'this' anymore below this point 
    div.append('something'); 
}); 

체인 연결된 버전은 작동합니다.