.empty（）を使用した後、なぜDOM要素にHTMLを挿入できないのですか？

Question

JSFiddlesでBootstrapテーブルをテストしているときに、テーブル内のボタンをクリックすると、ボタンが消えて通常のテキストに置き換えられるようにしたいと考えました。ここでは、マークアップの関連する部分である。しかし、helloがでレンダリングされないでしょう

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); 

：だから私は、以下のなかった、ボタンがクリックされたときにイベントをバインドするKnockoutJSを使用して

<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> 

すべて。しかし、私が$(param2.target).parent().empty();行を削除したとき、ボタンは私が元々望んでいた通りhelloに置き換えられました。 .empty()が子コンテンツのみを削除した場合、なぜ後でhtmlコンテンツを追加できないのですか？

Answer 1

文は

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

親要素のうち、すべてのコンテンツを空にします。あなたが他の（子）要素の親要素からすべてのコンテンツを空にした場合、あなたは子供に何が起こると思いますか？右：それはなくなった。したがって、親がもはや親ではないため、後で.html()のコンテンツを設定しようとすると機能しません。

あなたは親要素から連鎖を使用することができます。

.empty()への呼び出しが親をラップjQueryオブジェクトを返すために機能

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

。 がコード内での作業をしていないのは、（もうもはや）子要素からやり直しています。