.empty()를 사용한 후에 DOM 요소에 HTML을 삽입 할 수없는 이유는 무엇입니까?

Question

JSFiddles에서 부트 스트랩 테이블을 테스트하는 동안 테이블 안의 버튼을 클릭하면 버튼이 사라지고 일반 텍스트로 바뀌도록하려고했습니다.

<tbody> 
     <tr> 
      <td>John Doe</td> 
      <td>my@gmail.com</td> 
      <td><button class="disabled" data-bind="click: dosomething.bind($data, 'was', 'sup')" type="button" class="btn btn-warning">Crear Cuenta</button></td> 
     </tr> 
</tbody> 

그래서 버튼을 클릭하면에 이벤트를 바인딩 KnockoutJS를 사용하여

, 나는 다음과 같은 한 : 다음은 마크 업의 관련 부분입니다

function ViewModel() { 
    var self = this; 

    self.dosomething = function (data, event, param1, param2) { 
      var $stuff = $(param2.target).prop("disabled",true); 
     var $stuff2 = $(param2.target).hasClass("disabled"); 
     var $stuff3 = $(param2.target).parent(); 
     $(param2.target).parent().empty(); 
     $(param2.target).parent().html("hello"); 
    } 

    self.donext = function(){ 
      var $stuff = $(".disabled").prop("disabled",false); 
    } 
} 

var app = new ViewModel(); 
ko.applyBindings(app); 

그러나이 hello은 렌더링 할 것 모든. 하지만 $(param2.target).parent().empty(); 행을 삭제하면 버튼이 원래 내가 원하는대로 hello으로 대체됩니다. .empty() 만 자식 콘텐츠 만 제거하면 왜 나중에 html 콘텐츠를 추가 할 수 없습니까?

Answer 1

성명은

$(param2.target).parent().empty(); 

부모 요소에서 모든 콘텐츠를 비 웁니다. 다른 (자식) 요소의 부모 요소에서 모든 내용을 비우는 경우 자녀에게 어떤 일이 일어날 것이라고 생각하십니까? 오른쪽 : 사라졌습니다. 따라서 부모가 더 이상 부모가 아니기 때문에 이후에 .html() 콘텐츠를 설정하려고 시도하지 않습니다.

당신은 부모 요소에서 체인을 사용할 수 있습니다

.empty()에 대한 호출이 부모를 래핑 jQuery 오브젝트를 반환하기 때문에 작동

$(param2.target).parent().empty().html("hello"); 

. 이 코드에서이 작동하지 않으면 (더 이상) 자식 요소에서 다시 시작됩니다.