jQuery：如何删除div并将其重新绑定

Question

我已经通过jQuery动态地向<ul>添加了多个<li> 。 即我正在动态生成taskdetails。

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

然后对于图像单击事件，我将一个单独的<div>添加到相应的<li>标记中。 即每个任务的细节，我动态添加子任务的详细信息。

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

您可以使用JQuery .remove（） API从DOM中删除元素。