jquery：divを削除して再バインドする方法

Question

<li>さんの投稿を<ul>に動的にjQueryで複数追加しました。私。私は動的にタスク詳細を生成しています。

if ($('#ulTask li').length == 0) 
{ 
    $.ajax({ 
     type: "POST", 
     url: "http://xyz/x", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: OnSuccess, 
     error: OnError 
    }); 
    function OnSuccess(TaskData){   
     var TaskDataObj = jQuery.parseJSON(TaskData.d);     
     $.each(TaskDataObj, function (i, v) { 
      $("#ulTask").append('<li id="liTask'+TaskDataObj[i].TaskId+'"><div id="divTask'+TaskDataObj[i].TaskId+'"><img id="imgCollapse'+TaskDataObj[i].TaskId+'" alt="' + TaskDataObj[i].TaskId + '" src="Images/story_collapsed1.png" onclick="javascript:FillTaskDetails('+TaskId+');"/>&nbsp;&nbsp;'+ TaskTypeUrl +'&nbsp;&nbsp;&nbsp;<a href="#">' + TaskDataObj[i].TaskName + '</a></div></li>'); 
     }); 
    } 
    function OnError(request, status, error){ 
     alert(request.statusText); 
    } 
}   

そして、画像をクリックしてイベントのために私は、対応する<li>タグに別々<div>を追加しています。私。各タスクの詳細については、サブタスクの詳細を動的に追加しています。追加ボタンで

function FillTaskDetails(TaskId) 
{ 
    var index = $("#liTask"+taskId+"").index("#divTaskDetail"); 
    var CheckDivObj = $("#liTask"+taskId+"").children(); 
    var text = CheckDivObj.prevObject[0].innerHTML; 
    var index = text.indexOf("divTaskDetail");  
    if(index == -1) 
    { 
     $.ajax({ 
     type: "POST", 
     url: "http://abc/a", 
     data: '{"TaskId":' + id + '}', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     aysnc: false, 
     success: OnSuccess, 
     error: OnError 
    }); 
    function OnSuccess(TaskData){ 
     var TaskDataObj = jQuery.parseJSON(TaskData.d); 
     var divStr = ""; 
     var taskType = trim(getTaskType(TaskDataObj[0].TaskType)); 
     var taskStatys = trim(getTaskStatus(TaskDataObj[0].Status)); 
     var objSubTaskList = jQuery.parseJSON(subTaskList); 

     divStr = divStr + "<div id='divTaskDetail'>"; 
     var objsubTaskDetails = GetSuTaskDetails(TaskDataObj[0].TaskId); 
     $.each(objsubTaskDetails, function(i,v){ 
      divStr = divStr + "<p>"+objsubTaskDetails[i].subtaskName+"</p>"; 
     }); 
     divStr = divStr + "<input class='txttaskValues' type='text'/>"; 
     divStr = divStr + "<input type='button' class='btnAddCanel' value='Add' onClick='javascript:AddSubTask("+TaskDataObj[0].TaskId+");'/>"; 
     divStr = divStr + "</div>"; 
    } 
} 

私は正常にデータベースにデータを追加することですが、私は、DIV（「divTaskDetail」）動的にタグ付けを更新することはできませんよ。

function AddSubTask(id) 
{ 
    alert($("#txtSubTaskName").val()); 
    alert(id); 
    var id1 = parseInt(id), SubTaskName = $("#txtSubTaskName").val(); 
    $.ajax({ 
     type: "POST", 
     url: "http://trs/t", 
     data: "{'taskId': '" + id + "','subTaskName':'" + SubTaskName + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: OnSuccess, 
     error: OnError 
    }); 
    function OnSuccess(TaskStatus){ 
     alert(TaskStatus.d); 
     var index = $("#liTask"+id+"").index("#divTaskDetail"); 
     var CheckDivObj = $("#liTask"+id+"").children(); 
     var childNode = CheckDivObj.prevObject[0]; 
     if(childNode.innerHTML.indexOf("divTaskDetail") != -1) 
     { 
     $("#liTask"+id+"").children()[1].remove();//here i want to remove this div and rebind it 
     } 
} 

divを削除して、新しいデータ、つまり新たに追加したデータで再バインドしたかったとします。

どのようにすればいいのか説明できる人はいますか？

Answer 1

DOMから要素を削除するには、JQuery .remove() APIを使用できます。