jquery - jQuery:html(データ)が既存の要素をクリアしない

Question

私は次のように3つのdiv要素を持っています

<div id='branch-1'>
   <ul>
     <li><span>Parent-1</span></li>
     <li><span>Parent-2</span></li>
     <li><span>Parent-3</span></li>
   </ul>
</div>
<div id='branch-2'></div>
<div id='branch-3'></div>

divユーザーがクリックすると、最初の要素がページとともに読み込まれ、次のように使用して、同様にParent-1、その子要素が 2 番目に読み込まれます。divParent-2 and Parent-3ajax

$("div#branch-1 ul li span").click(function () {
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        dataType: 'html',
        async: false,
        success: function (data) {
            $("div#branch-2").html(data);
            $("div#branch-3").empty();
        }
    });
});    

ユーザーが 2 番目divの要素をクリックすると、次のように子要素を 3 番目にロードしdivますajax。

$(document).on("click", "div#branch-2 ul li span"function () {
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        dataType: 'html',
        async: false,
        success: function (data) {
            $("div#branch-3").html(data);
        }
    });
});   

実際の質問:既存のデータが消去されないこと$("div#branch-3").html(data);があります。そのため、以前に次のステートメントを試しました$("div#branch-3").html(data);

 $("div#branch-3").html(""); // Not worked
 //OR
 $("div#branch-3").empty(); // Not worked
 //OR
 $("div#branch-3").contents().remove(); // Not worked

上記selectorをdiv#branch-3todiv#branch-3 ulまたはdiv#branch-3 lior div#branch-3 spanthen に変更すると、上記のすべてのステートメントが正常に機能します。

1. html(data)既存のデータを置き換えることができないのはなぜですか?
2. としてselector渡しているのに、既存の要素をクリアする理由を変更した後parent element idselector

追加情報を追加:上で述べたように、既存のデータが消去されない場合があります。 .html(data)

Parent-12 つの子があるとします。ここChild-1,Child-2でもChild-12 つの子がA,BありChild-2、3 つの子があります。X,Y,ZユーザーがクリックしたChild-2場合X,Y,Zはbranch-3 divその罰金で表示され、再びユーザーがクリックしたChild-1場合X,Yは置き換えられますA,Bが、Zまだ存在します。firebug でその (Z) の場所を指定しようとすると、消えてしまいます。

Answer 1

これを試して-

$("div#branch-3").html(markUp).trigger("create");