Question

我已经通过jQuery动态地向<li>添加了多个<ul>。即我正在动态生成任务详细信息。

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中删除元素。

jquery：如何删除div并重新绑定它

1 个答案: