javascript - 更新後に動的アコーディオンの最後の要素が削除されない

Question

以下のような動的アコーディオンがあります。クリックするとデータが削除され、アコーディオンが再作成されたときに各結果に編集ボタンが追加されました (つまり、サーバーからの新しいデータから関数データが​​再作成されます)。アコーディオン、削除された後でも最後の要素はまだ永続的であり、リストに残ります。ただし、データは null (操作は実行できません) です。なぜこれが起こるのか、私は非常に混乱しています。基本的に、アコーディオンには常に 1 つの要素が残っています。

data は、複数のオブジェクトを含む JSON オブジェクトです。

{data[0]: name:{} , user:{} data[1]: name:{} , user:{} // インデックスは構造を説明するために行われます。.}など

function data(data){
    var parent = document.getElementById('accordion');
    //parent.setAttribute('class','bookListItem')
    removeChildrenFromNode(parent);
    for(var i=0 ; i < data.length ; i++)
        {
        var listItem = document.createElement('h3');
        parent.appendChild(listItem);
        listItem.setAttribute('style','height:110px');


        var link = document.createElement('a');
        listItem.appendChild(link);
        link.setAttribute('href','#');
        link.innerHTML = data[i].first.name + " by " + data[i].last.name;

        var pic = document.createElement('img');
        pic.setAttribute('src',data[i].book.pictureURL);
        pic.setAttribute('style','float:left;height:97px;width:64px"');
        link.appendChild(pic);

        var innerDiv = document.createElement('div');
        parent.appendChild(innerDiv);
        var innerList = document.createElement('ul');
        innerDiv.appendChild(innerList);
        //setting attributes
 edit.innerHTML ="Edit"
         edit.onclick=(function(i){   
         return function(){delete(data[i]);  
         }})(i);
         innerDiv.appendChild(edit);

    }
    $('#accordion').accordion('destroy').accordion(
        {
            collapsible:true,
            active:false
        });

}